Edit Question - KnowledgeHub

Title Body

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?

Tags (comma-separated) Cancel