960 grid's clearfix vs HTML5 Boilerplate's clearfix - What's the difference?

960 grid's clearfix vs HTML5 Boilerplate's clearfix - What开发者_运维百科's the difference?

Here's the clearfix found in Nathan Smith's 960 grid's css:

/* 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;
}

and here is the clearfix found in Paul Irish's HTML5 Boilerplate:

/* 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; }

As you can see they are VERY similar. However they are different.

Does anyone have any insight into this?

Which is better and why?

The only difference is that 960's has this inside .clearfix:before, .clearfix:after:

visibility: hidden;
width: 0;

Other than that, they are identical.

height: 0; overflow: hidden should remove the need for any other declarations to hide the pseudo-elements.

My theory is that the HTML5 Boilerplate folks have stringently verified that those two extra declarations are not required for any browser and then removed them.

Our clearfix has been updated to this:

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }

Details are on this post by Nicolas Gallagher