title: Confuse about clear float style in bootstrap
body: <p>I read an article about clear float <a href="http://www.positioniseverything.net/easyclearing.html" rel="nofollow">How To Clear Floats Without Structural Markup</a></p>
  
  <p>then I check the <code>.clearfix</code> in bootstrap:</p>
  
  <pre><code>.clearfix {
    *zoom: 1;
  }
  
  .clearfix:before,
  .clearfix:after {
    display: table;
    line-height: 0;
    content: "";
  }
  
  .clearfix:after {
    clear: both;
  }
  </code></pre>
  
  <p>and I find some differences, and I have several questions:</p>
  
  <ol>
  <li>Why the <code>clearfix</code> separate to several parts?</li>
  <li>Why the <code>display</code> is <code>table</code>, not the <code>block</code>?</li>
  <li>Why this use <code>line-height</code> not the <code>height</code>?</li>
  </ol>