Author: Tony Aslett
First created 8-May-2004

There is a large and growing movement by web developers and designers towards web standards. Part of that movement focuses on clean mark-up, which has many long term benefits such as easier maintenance, lighter pages and better support by browsers of the future.

One thing that has bugged me was the need to add clearing elements to the mark-up to keep a container wrapped around a floated element. Most people use a division, horizontal rule or a break and set it to clear both to keep the container around the float. Well now there's another way that will free us from the need to add extra clearing elements.

Firstly, if you don't have a good understanding of floats here's a couple of articles you should read.

for it was these very articles that led me to this solution.

Matt Brubeck described how you could use the pseudo element :after on the container of the float. I've modified his example slightly by giving the content something to add and using visibility hidden.

.floatcontainer:after{ content: "."; display: block; height: 0; font-size:0; clear: both; visibility:hidden; } /*Having something in the content such as a period gives a more consistent results across browsers. eg. NN7*/

This works well in most non IE browsers, in Matt's article How to completely enclose a floated element in CSS2, it was suggested that using height:100% fixes the problem for IE. Unfortunately using height 100%; works on IE when the container of the float is contained by another element, which has a valid height. Otherwise IE and other browsers will expand the height of the container to the full viewpoint height.

Luckily IE will expand a box to fit the contents so we can target only IE and give it a smaller height and it will expand to fit the content. This is where Big John and Holly Bergevin step in with the incredible Holly Hack and take care of IE. The IE Escaping Floats Bug

So to put it all together we can contain a floated element and get the size of the container to expand so that it will completely enclose the float using this combined method and without any clearing element. Which gives us cleaner and lighter mark-up.

Original Clearfix

.floatcontainer:after{ content: "."; display: block; height: 0; font-size:0; clear: both; visibility:hidden; } .floatcontainer{display: inline-block;} /* Hides from IE Mac \*/ * html .floatcontainer {height: 1%;} .floatcontainer{display:block;} /* End Hack */

Micro Clearfix

/* For modern browsers */ .cf:before, .cf:after { content:""; display:table; } .cf:after { clear:both; } /* For IE 6/7 (trigger hasLayout) */ .cf { *zoom:1; }

Combinator Clearfix

Combining the best of Micro with the Original for better old browser support.

.cf:before, .cf:after { content:"."; display:table; height: 0; font-size:0; line-height:0; visibility:hidden; } .cf:after { clear:both; } .cf { *zoom:1; }


See examples of different Clearfix techniques.
Added Micro clearfix and Combinator clearfix code.

Gary Turner has a good description of this and other float enclosing techniques. Enclosing Float Elements

ClevaTreva, a well respected CSS Forum Guru, pointed out that Firefox reserves space after the container under certain circumstances. A simple fix is to set font-size:0;
Thanks Trevor.

Big John with the help of Mark Hadley and others, have found a way to fix the IE5 Mac problems without resorting to JavaScript. I have updated this page to more closely reflect the changes and discoveries found in Big John article Easy Clearing.
Thanks guy's, that helps to simplify things.

How this still works in IE7...

Many people are probably not yet aware that setting the floatcontainer class to [url]display:inline-block; in one rule and then to display:block; in another has an interesting affect on IE5.5+/Win -- it triggers the mystical hasLayout flag.[/url] Since that triggers the hasLayout flag, this technique works in IE7 when in "standards compliance mode". It wouldn't otherwise because when in "standards compliance mode" IE7 doesn't support the * html (star html) hack.

The height:1px; or height:1%; is still needed for IE5.0/Win because it doesn't recognize display:inline-block;.

More information: