title: 960 grid's clearfix vs HTML5 Boilerplate's clearfix - What's the difference?
body: <p>960 grid's clearfix vs HTML5 Boilerplate's clearfix - What's the difference?</p>
  
  <p>Here's the clearfix found in Nathan Smith's 960 grid's css:</p>
  
  <pre><code>/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
  
  .clearfix:before,
  .clearfix:after {
    content: '\0020';
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
  }
  
  .clearfix:after {
    clear: both;
  }
  
  /*
    The following zoom:1 rule is specifically for IE6 + IE7.
    Move to separate stylesheet if invalid CSS is a problem.
  */
  
  .clearfix {
    zoom: 1;
  }
  </code></pre>
  
  <p>and here is the clearfix found in Paul Irish's HTML5 Boilerplate:</p>
  
  <pre><code>/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
     j.mp/bestclearfix */
  
  .clearfix:before, .clearfix:after {
      content: "\0020"; 
      display: block; 
      height: 0; 
      overflow: hidden;
  }
  
  .clearfix:after { clear: both; }
  
  /* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
  
  .clearfix { zoom: 1; }
  </code></pre>
  
  <p>As you can see they are <em>VERY</em> similar. However they are different.</p>
  
  <p>Does anyone have any insight into this?</p>
  
  <p>Which is better and why?</p>