title: CSS floats & Overlapping boxes
body: <p>I've been messing with CSS, trying to understand floats, etc. Here is what the issue looks like:</p>
  
  <p><img src="https://i.stack.imgur.com/3bShk.png" alt="CSS float overlapping"></p>
  
  <p>As you can see, the yellow box floats behind the gray and past it. How do I make it stop right before box Two? <strong><a href="http://jsfiddle.net/8pX9s/" rel="noreferrer">Here is my code</a></strong>:</p>
  
  <pre><code>&lt;style&gt;
  /*resests begin*/
  html, body, div, span, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
  small, strong, sub, sup, var, b, i, dl, dt, dd,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, figcaption, figure,
  footer, header, hgroup, menu, nav, section, summary,
  time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      /*vertical-align: baseline; */
      font-weight:normal;
  }
  
  article, aside, details, figcaption, figure,
  footer, header, hgroup, menu, nav, section {
    display: block;
  }
  /*resests end*/
  
  
  body {
      font-size:16px;
      margin:5px;
  
  }
  
  h1 {font-size:2em;}
  
  nav {
      background-color:#ccc;
      padding:5px;
      width:200px;
      height:200px;
      margin:10px;
  }
  
  #a {
      background-color:#FFC;
      padding:10px;
  }
  
  .r-set {
      padding-left:10px;
      float:right;
  }
  
  
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;h1&gt;Title&lt;/h1&gt;
  
  &lt;nav class="r-set"&gt;
    &lt;p&gt;&lt;a href="#"&gt;Two&lt;/a&gt;&lt;/p&gt;
  &lt;/nav&gt;
  
  &lt;div id="a"&gt;
    &lt;h3&gt;One&lt;/h3&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>