New Clearfix Technique

[unwiredbrain]

Nicolas Gallagher's micro clearfix hack is the new chapter in the neverending clearfix affair.

It's incredibly lightweight and it's working like a charm.

Here's the code (2011-04-25 revision)

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

[nathansmith]

If the newer .clearfix method addressed some shortcoming or bug in the existing method, I'd definitely switch.

But since it's one of those "six of one, half dozen of the other" situations -- same net result -- I'm going to leave the .clearfix in 960 as is.

I don't want to make a change to a file that people rely on, just for the sake of saving a few bytes.

That said, please don't take that as me berating you pointing me to an alternative solution. I always like to be aware of what's out there! :)

[cssagogo]

FYI... I did notice that the Grid Calculator and the GitHub versions of the clearfix are different.

[nathansmith]

Do you mean this site?

http://www.29digital.net/grid

I don't have any affiliation with them. I would recommend using this one instead...

http://grids.heroku.com

[cssagogo]

The one you suggest has a different clearfix. In your download package you include a zoom fix for IE and in the heroku.com calculator they use an older * HTML version. Probably not a big deal. Just thought I would mention. That said I think I'm going to use the above version and swap .cf for .clearfix to avoid having to replace existing instances of the class name.