CSS clearfix

clearfix.css

/* based on http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/ */

.cf:before,
.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
---
http://www.positioniseverything.net/easyclearing.html
http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/
http://thinkvitamin.com/design/everything-you-know-about-clearfix-is-wrong/
http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/
http://nicolasgallagher.com/micro-clearfix-hack/
http://nicolasgallagher.com/better-float-containment-in-ie/ [Including Comments]
https://gist.github.com/935783/





---
Detailed History
---

[2001-08-17]
The "Spacer" Div Technique described in a "A List Apart" article
by Mark Newhouse. Works in all browsers, but requires presentational markup.
http://www.alistapart.com/articles/practicalcss

[2002-08-15]
Lydia Lalopolis suggests a CSS only solution using :after
Doesn't work in IE.
http://lists.w3.org/Archives/Public/www-style/2002Aug/0134.html
http://lists.w3.org/Archives/Public/www-style/2002Aug/0135.html

[2003-06-24]
Matt Brubeck builds on Lydia Lalopolis' :after suggestion to fix the problem 
in her suggestion. Doesn't work in IE.
http://www.cs.hmc.edu/~mbrubeck/clear-after
http://lists.w3.org/Archives/Public/www-style/2002Aug/0135.html

[2004-05-12]
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
http://csscreator.com/node/1667
http://csscreator.com/attributes/containedfloat.php
http://www.positioniseverything.net/articles/haslayout.html
http://www.positioniseverything.net/explorer/escape-floats.html
http://www.satzansatz.de/cssd/onhavinglayout.html

[2004-05-14]
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.
http://www.positioniseverything.net/easyclearing.html
http://fu2k.org/alex/css/cssjunk/FloatInlineBlock.html
http://www.positioniseverything.net/explorer/guillotine.html
http://css-class.com/articles/explorer/guillotine/index.htm

[2004-10-24]
Steve Smith - The Float nearly Everything method or the FnE Method.
http://orderedlist.com/blog/articles/clearing-floats-the-fne-method/

[2005-02-26]
overflow:auto or overflow:hidden with width
http://www.sitepoint.com/simple-clearing-of-floats/
http://www.pmob.co.uk/
http://www.pmob.co.uk/temp/float-clear.htm
http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html
http://www.quirksmode.org/css/clearing.html

[2009-12-06]
IE/Mac no longer needed
http://perishablepress.com/press/2009/12/06/new-clearfix-hack/

[2010-04-13]
Thierry Koblentz:
Everything you Know about Clearfix is Wrong
clearfix Reloaded + overflow:hidden Demystified
http://tjkdesign.com/articles/clearfix_block-formatting-context_and_hasLayout.asp
http://tjkdesign.com/articles/clearing-floats_and_block-formatting_context.asp
http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/

[2011-04-21]
Nicolas Gallagher: A new micro clearfix hack
http://nicolasgallagher.com/micro-clearfix-hack/

[2011-04-26]
Nicolas Gallagher: Better float containment in IE using CSS expressions.
The comment thread also has some great discussion. 
http://nicolasgallagher.com/better-float-containment-in-ie/
https://gist.github.com/935783/
http://jsfiddle.net/necolas/CaNvV/show
http://haslayout.net/haslayout
http://www.css-101.org/collapsing-margin/03.php
http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/d03ccc6e-bd74-4ce1-af96-b4e496704d85


Other References:

http://css.maxdesign.com.au/floatutorial/
http://www.complexspiral.com/publications/containing-floats/
http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
http://www.w3.org/TR/CSS2/visuren.html
http://www.w3.org/TR/CSS2/visudet.html#containing-block-details
http://www.w3.org/TR/CSS2/visuren.html#block-formatting
https://developer.mozilla.org/en/CSS/block_formatting_context
http://msdn.microsoft.com/en-us/library/bb250481%28VS.85%29.aspx

*/