title: Clearing floats for just parent container, not ancestors?
body: <p>I have the following layout with 2 level float containers:</p>
  
  <pre><code>&lt;div id="navigation" style="float: left; width: 150px; height: 200px; background-color: #eee"&gt;Navigation&lt;/div&gt;
  &lt;div id="container" style="margin-left: 150px; background-color: #f00"&gt;
      &lt;div style="float: left; width: 50%; height: 100px; background-color: #ff0"&gt;Block&lt;/div&gt;
      &lt;div style="float: left; width: 50%; height: 20px; background-color: #f0f"&gt;Block&lt;/div&gt;
      &lt;div style="clear: both"&gt;&lt;/div&gt;
      &lt;div style="float: left; width: 50%; height: 50px; background-color: #00f"&gt;This Block&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>You can see it live at <a href="http://jsfiddle.net/dNmNj/" rel="noreferrer">http://jsfiddle.net/dNmNj/</a> .</p>
  
  <p>My intention is to clear floats for <code>#container</code> so that the blue block (<code>This Block</code>) stays right below the yellow one (not the pink one). However, the result is that it also cleared floats for <code>#navigation</code>.</p>
  
  <p>How do I clear floats just for the parent container and not any ancestor containers?</p>