Contained Floats, the clearfix technique

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.

• Floatutorial
• How to completely enclose a floated element in CSS2
• Float: The Theory
• The IE Escaping Floats Bug

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.

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

Micro Clearfix

Combinator Clearfix

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

Updates

Updated:6-July-2012
See examples of different Clearfix techniques.
Added Micro clearfix and Combinator clearfix code.

Updated:7-Mar-2010
Gary Turner has a good description of this and other float enclosing techniques. Enclosing Float Elements

Updated:11-Dec-2005
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.

Updated:13-Dec-2004
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.

Author: Tony Aslett