title: Floated div not taking full width
body: <p>Why do floated divs don't take full width? Aren't they still block elements?</p>
  
  <p>Here is an example <a href="http://jsfiddle.net/GKjC8/" rel="nofollow">http://jsfiddle.net/GKjC8/</a></p>
  
  <p>html</p>
  
  <pre><code>&lt;div id="a"&gt;a&lt;/div&gt;
  &lt;div id="b"&gt;b&lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>div {
      background-color:cyan;
  }
  #a {
      float:left;
  }
  #b {
      clear:left;
  }
  </code></pre>
  
  <p>The <code>a</code> div looks like it's <code>inline</code> since it takes as much space as its content. Can someone explain?</p>