title: Parent <div> not wrapping child element with float attribute
body: <p>Please look at <a href="http://jsfiddle.net/M68xL/" rel="noreferrer">this example</a> and explain to me why the green <code>&lt;div&gt;</code> does not wrap itself around the orange <code>&lt;div&gt;</code>.</p>
  
  <pre><code>&lt;div id='green'&gt;
    &lt;div id="orange"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  #green{
      border: 20px solid #3D3;
  }
  
  #orange{
      width :100px;
      height: 100px;
      border: 10px solid orange;
      float: left;
  }
  </code></pre>