title: Clear fix HTML is not working in chrome?
body: <p>I've created <a href="http://jsbin.com/ukaxav/2/edit" rel="nofollow noreferrer"><strong>this simple html</strong></a> : </p>
  
  <p>there are 2 SPANs here.</p>
  
  <p>one should be beneath the other by clearing the float.</p>
  
  <p><img src="https://i.stack.imgur.com/14uyY.jpg" alt="enter image description here"></p>
  
  <p>The <code>bbb</code> element has <code>float:left</code> </p>
  
  <p>And I used (on the <code>aaa</code> element )  , Facebook's "clearfix" CSS which is : </p>
  
  <pre><code> .clearfix:before { content: ""; display: table; }
   .clearfix:after {  content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;}
  
   .clearfix { zoom: 1; }
  </code></pre>
  
  <p>This is a valid way ( as facebook do) and as <a href="http://robertnyman.com/2007/04/12/how-to-clear-css-floats-without-extra-markup-different-techniques-explained/" rel="nofollow noreferrer">described here</a> </p>
  
  <p>However it works in FireFox : (look at the above picture)</p>
  
  <p>But in chrome (v 24) it doesn't . </p>
  
  <p><img src="https://i.stack.imgur.com/P5Y7v.jpg" alt="enter image description here"></p>
  
  <p>What am I missing ? </p>