12

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?

John
  • 3,866
  • 6
  • 33
  • 37

2 Answers2

5

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.

thirtydot
  • 224,678
  • 48
  • 389
  • 349
5

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

Divya Manian
  • 1,927
  • 11
  • 16
  • It seems to me that the :before declaration is outside the scope of a clearfix. It's actual stated purpose has to do with margins collapsing. I use :before and :after generated content enough that I don't want them used arbitrarily when I may not need them. I want a clearfix to fix float clearing. That is all. So this could be simplified farther to: `.clearfix:after { content: ""; display: table; clear: both; } .clearfix { zoom: 1; }` – Miriam Suzanne Jul 13 '11 at 05:22
  • :before adds visual consistency between IE6/7's rendering of floats and other browsers. If you do not want that, yes it can be definitely shortened. – Divya Manian Jul 14 '11 at 15:30