title: Understanding Bootstrap's clearfix class
body: <pre><code>.clearfix {
    *zoom: 1;
    &amp;:before,
    &amp;:after {
      display: table;
      content: "";
      // Fixes Opera/contenteditable bug:
      // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
      line-height: 0;
    }
    &amp;:after {
      clear: both;
    }
  }
  </code></pre>
  
  <ol>
  <li>Why not use <code>display:block</code>?</li>
  <li>In addition, why does it also apply to the <code>::before</code> pseudoclass?</li>
  </ol>