Skip to content

Instantly share code, notes, and snippets.

Created June 15, 2012 05:37
Show Gist options
  • Save mrinalwadhwa/2934863 to your computer and use it in GitHub Desktop.
Save mrinalwadhwa/2934863 to your computer and use it in GitHub Desktop.
CSS clearfix
/* based on */
.cf:after {
content: ".";
display: block;
height: 0;
overflow: hidden;
.cf:after {clear: both;}
.cf {zoom: 1;} /* IE < 8 */
For a quick understanding read the following 6 links, For a detailed
undertsnding read all links in the detailed history.
Quick Understanding
--- [Including Comments]
Detailed History
The "Spacer" Div Technique described in a "A List Apart" article
by Mark Newhouse. Works in all browsers, but requires presentational markup.
Lydia Lalopolis suggests a CSS only solution using :after
Doesn't work in IE.
Matt Brubeck builds on Lydia Lalopolis' :after suggestion to fix the problem
in her suggestion. Doesn't work in IE.
Tony Aslett proposes a cross broser solution using the :after
suggetion above and combing it with Big John's and Holly Bergevin's ZoomFix
to address IE's issue. Doesn't work in IE Mac
Big John's' detailed article with solutions to fix IE Mac
problems and suggestions for addressing remaining problems like the IE/Win
Guillotine Bug and other issues with old Gecko browsers.
Steve Smith - The Float nearly Everything method or the FnE Method.
overflow:auto or overflow:hidden with width
IE/Mac no longer needed
Thierry Koblentz:
Everything you Know about Clearfix is Wrong
clearfix Reloaded + overflow:hidden Demystified
Nicolas Gallagher: A new micro clearfix hack
Nicolas Gallagher: Better float containment in IE using CSS expressions.
The comment thread also has some great discussion.
Other References:
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment