The New Clearfix Method

Updated June 29, 2018 • 149 comments

Say goodbye to the age-old clearfix hack and hello to the new and improved clearfix method..

The clearfix hack, or “easy-clearing” hack, is a useful method of clearing floats. I have written previously about the original clearfix method and even suggested a few improvements. The original clearfix hack works great, but the browsers that it targets are either obsolete or well on their way. Specifically, Internet Explorer 5 for Mac is now history, so there is no reason to bother with it when using the clearfix method of clearing floats.

The original clearfix hack looks something like this:

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

Yes it’s ugly, but it works very well, enabling designers to clear floats without hiding overflow and setting a width or floating (nearly) everything to get the job done. The logic behind this hack goes something like this:

Target compliant browsers with the first declaration block (if all browsers were standards-compliant, this would be the only thing needed) and create a hidden clearing block after the content of the target element.
The second declaration applies an inline-table display property, exclusively for the benefit of IE/Mac.
At this point, we use the comment-backslash hack to hide the remainder of the rules from IE/Mac. This enables us to do the following:
Apply a 1% height only to IE6 to trigger hasLayout (which is required for the hack to work)
Re-apply display:block to everything except IE/Mac
The last line is a comment that serves to close the hack for IE/Mac

As you can see, that’s a lot of fuss over a browser that has been dead for at least the last three or four years. Nobody uses IE/Mac anymore, so it is time to drop it from the clearfix hack. The result is a much cleaner and more efficient slice of CSS:

/* new clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

Stripping out that IE/Mac cruft cleans things up real nice. Notice that we have further improved the clearfix hack by adding support for IE7. Neither IE6 nor IE7 support the :after pseudo-class used in the first declaration, so we need an alternate method of applying the clearfix. Fortunately, applying zoom:1 to either browser triggers IE’s proprietary hasLayout mechanism, which works just fine to clear the float. For expediency’s sake, we accomplish this with a couple of valid browser-specific selectors, but you should be advised that conditional comments are the recommended way to go.

Fortunately, IE8 supports the :after pseudo-class, so this new clearfix method will only become more simplified as IE6 and, eventually, IE7 finally die off.

Bottom line: The new clearfix method applies clearing rules to standards-compliant browsers using the :after pseudo-class. For IE6 and IE7, the new clearfix method triggers hasLayout with some proprietary CSS. Thus, the New Clearfix method effectively clears floats in all currently used browsers without using any hacks.

About the Author

Jeff Starr = Web Developer. Security Specialist. WordPress Buff.

149 responses to “The New Clearfix Method”

Jeff Starr 2009/12/14 12:19 pm • Post Author

Hi Sal, that method definitely works in some situations, but there are good reasons why it isn’t a one-size-fit-all solution for clearing floats.

Sal B 2009/12/14 11:52 am

I’ve used overflow:hidden; on the containing element and that usually works out fine.

Teddy 2009/12/14 5:43 pm

@Gary: Oooh boy. Here’s a chill pill for you :) anyway, yeap I agree that zoom: 1 is a proprietary property meant for IE but what I personally feel is that it doesn’t hurt to include it even if it invalidates your CSS. I used to be a validation OCD back then but now I’ve learned to let things go, teehee.

@Jeff: Oh yea, the overflow: auto property may give rise to some problems if the content overflows. My bad! I wasn’t thinking straight when I typed that out and I recommend overflow: hidden instead, heh. And speaking of layout problems, overflow do give certain layout inconsistencies across some browsers under certain circumstances (I sound very general here because I forgot how to trigger the problems – I swear I found a ton of them when using the overflow property instead of the height fix). I guess height: 1% is still the way to go. Have a great week ahead yea!

Florian Purchess 2009/12/15 12:42 pm

Hey Jeff, I always use css-clearfix in my projects and it’s basic part of my css-lib. In ref of your title: How much do you consider it as new? Why do you prefer inline-table instead of inline-block, which is more common? Greetz, Flo :)

Jeff Starr 2009/12/15 12:58 pm • Post Author

Hi Florian, good questions – if you read through the article, you will see that I mention my previous work on the clearfix hack, which implements some new properties and modifies some existing ones. These improvements are now used together with the further changes made in this article, which consist mostly of eliminating IE5 support, simplifying for IE6, and including explicit mention of IE7.

As for why I prefer “inline-table” instead of “inline-block,” well actually if you look closely you will see that neither of these property values are used in the “new” clearfix class.

Ingo Chao 2009/12/15 2:32 pm

small notes:

– IE7 was already supported. http://ago.tanfa.co.uk/archives/300.html

– Your maintenance work on the old Aslett/PIE hack should at least link to the original method and their authors. /They/ did something “new”.

– “without using hacks” … adding a pseudo-element to a container to let it contain its floats is of course hack. Not to speak from that zoom you are sending to IE.

Jeff Starr 2009/12/15 2:33 pm • Post Author

@Ingo Chao: some good points, especially on the IE7 support — I rescind my previous comment concerning it. For your second point, re-check my work on the original method: the fifth word into the post — and the very first link — credits the original PIE method. Beyond that, I’m going to have to disagree that using valid CSS such as the :after pseudo-element to achieve design goals is in any way a “hack.” There are no “rules” as to how valid CSS may be used in web design. And, just because zoom is proprietary doesn’t qualify it as a hack either. I clearly state in the article that the IE rules should be delivered directly via conditional comments.

Jens Grochtdreis 2009/12/15 2:34 pm

The idea to drop IE5Mac is okay. You could reduce the last two rules to only one rule. The zoom-property is only understood by IE. And a star in front of a property is only read by IE6 and 7. So why not write:

.clearfix { *zoom: 1;}

BTW: it is possible, that IE8 doesn’t understand “zoom”. Given that we could drop the star, too.

Jeff Starr 2009/12/15 2:53 pm • Post Author

@Jens Grochtdreis: good call – I was just thinking something similar about consolidating the zoom property into the .clearfix:after selector. Much cleaner, but still best to deliver it via conditional comments I think. Thanks for the comment :)

Jens Grochtdreis 2009/12/15 3:08 pm

@Jeff: You cannot consolidate the zoom-property into .clearfix:after, because IE6 (and 7?) won’t see it. ;-)

Of course the best way would be to split the rules into a normal stylesheet and an IE-CSS. But sometimes it is best to keep them together os you can easily teach the rules and transport them to another project.

Jeff Starr 2009/12/15 3:16 pm • Post Author

@Jens: Doh! That’s very true – and a sign that I have spent too much time at the computer today ;)

Ionut Botizan 2009/12/15 3:46 pm

.clearfix {
          min-height:0;
          height:auto !important;
          height:0;
          }

One definition for both IE6 and IE7, with valid CSS rules and min-height hack:

min-height:0; will trigger hasLayout in IE7

height:auto !important; will preserve auto height for all browsers, except IE6

height:0; will trigger hasLayout in IE6, but won’t affect other browsers, because of the previous rule (which IE6 ignores in this situation)

Comments are closed for this post. Something to add? Let me know.

Jeff Starr 2009/12/14 12:19 pm • Post Author

Hi Sal, that method definitely works in some situations, but there are good reasons why it isn’t a one-size-fit-all solution for clearing floats.
Sal B 2009/12/14 11:52 am

I’ve used overflow:hidden; on the containing element and that usually works out fine.
Teddy 2009/12/14 5:43 pm

@Gary: Oooh boy. Here’s a chill pill for you :) anyway, yeap I agree that zoom: 1 is a proprietary property meant for IE but what I personally feel is that it doesn’t hurt to include it even if it invalidates your CSS. I used to be a validation OCD back then but now I’ve learned to let things go, teehee.

@Jeff: Oh yea, the overflow: auto property may give rise to some problems if the content overflows. My bad! I wasn’t thinking straight when I typed that out and I recommend overflow: hidden instead, heh. And speaking of layout problems, overflow do give certain layout inconsistencies across some browsers under certain circumstances (I sound very general here because I forgot how to trigger the problems – I swear I found a ton of them when using the overflow property instead of the height fix). I guess height: 1% is still the way to go. Have a great week ahead yea!
Florian Purchess 2009/12/15 12:42 pm

Hey Jeff, I always use css-clearfix in my projects and it’s basic part of my css-lib. In ref of your title: How much do you consider it as new? Why do you prefer inline-table instead of inline-block, which is more common? Greetz, Flo :)
Jeff Starr 2009/12/15 12:58 pm • Post Author

Hi Florian, good questions – if you read through the article, you will see that I mention my previous work on the clearfix hack, which implements some new properties and modifies some existing ones. These improvements are now used together with the further changes made in this article, which consist mostly of eliminating IE5 support, simplifying for IE6, and including explicit mention of IE7.

As for why I prefer “inline-table” instead of “inline-block,” well actually if you look closely you will see that neither of these property values are used in the “new” clearfix class.
Ingo Chao 2009/12/15 2:32 pm

small notes:

– IE7 was already supported. http://ago.tanfa.co.uk/archives/300.html

– Your maintenance work on the old Aslett/PIE hack should at least link to the original method and their authors. /They/ did something “new”.

– “without using hacks” … adding a pseudo-element to a container to let it contain its floats is of course hack. Not to speak from that zoom you are sending to IE.
Jeff Starr 2009/12/15 2:33 pm • Post Author

@Ingo Chao: some good points, especially on the IE7 support — I rescind my previous comment concerning it. For your second point, re-check my work on the original method: the fifth word into the post — and the very first link — credits the original PIE method. Beyond that, I’m going to have to disagree that using valid CSS such as the :after pseudo-element to achieve design goals is in any way a “hack.” There are no “rules” as to how valid CSS may be used in web design. And, just because zoom is proprietary doesn’t qualify it as a hack either. I clearly state in the article that the IE rules should be delivered directly via conditional comments.
Jens Grochtdreis 2009/12/15 2:34 pm

The idea to drop IE5Mac is okay. You could reduce the last two rules to only one rule. The zoom-property is only understood by IE. And a star in front of a property is only read by IE6 and 7. So why not write:

.clearfix { *zoom: 1;}

BTW: it is possible, that IE8 doesn’t understand “zoom”. Given that we could drop the star, too.
Jeff Starr 2009/12/15 2:53 pm • Post Author

@Jens Grochtdreis: good call – I was just thinking something similar about consolidating the zoom property into the .clearfix:after selector. Much cleaner, but still best to deliver it via conditional comments I think. Thanks for the comment :)
Jens Grochtdreis 2009/12/15 3:08 pm

@Jeff: You cannot consolidate the zoom-property into .clearfix:after, because IE6 (and 7?) won’t see it. ;-)

Of course the best way would be to split the rules into a normal stylesheet and an IE-CSS. But sometimes it is best to keep them together os you can easily teach the rules and transport them to another project.
Jeff Starr 2009/12/15 3:16 pm • Post Author

@Jens: Doh! That’s very true – and a sign that I have spent too much time at the computer today ;)
Ionut Botizan 2009/12/15 3:46 pm

.clearfix {
          min-height:0;
          height:auto !important;
          height:0;
          }

One definition for both IE6 and IE7, with valid CSS rules and min-height hack:

min-height:0; will trigger hasLayout in IE7

height:auto !important; will preserve auto height for all browsers, except IE6

height:0; will trigger hasLayout in IE6, but won’t affect other browsers, because of the previous rule (which IE6 ignores in this situation)

« Previous Comments • 1…34567…13 • Newer Comments »