The New Clearfix Method

Updated August 7, 2024 • 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”

Paul Irish 2009/12/07 1:27 pm

I obviously don’t read before I post.. sorry.

I’d just do a

.clearfix { *zoom: 1 }

But that’s me and my quick unvalidating hacks.

Vladimir Carrer 2009/12/07 12:41 pm

Thanks for the update. I will make all the test later for all my CSS Frameworks.

kcmr 2009/12/07 3:36 pm

I use min-height: 0 for IE 7 instead zoom: 1, and height: 1% for IE 6
This is valid CSS and has no effects for other browsers.

.clearfix{min-height: 0;} /* IE 7 */
* html .clearfix{height: 1%;} /* IE 6 */

I also aply this rules to all divs to avoid use continuosly the clearfix class in the HTML code.

div:after{... }
div{min-height:0;}
* html div{height: 1%;}

Victor Teixeira 2009/12/07 5:32 pm

hmmm… The clearfix that I use is like this:

.clearfix:after {
       clear:both;
       content:".";
       display:block;
       height:0;
       visibility:hidden;
}
.clearfix {
       min-height: 0;
       display: block;
}

And the IE6 part:

* html .clearfix {height: 1%;}

Jorik 2009/12/08 12:19 am

What about this? works in all browsers i believe…

.clearfix { overflow: hidden; }
/* ie part */
.clearfix { zoom: 1; }

Jeff Starr 2009/12/08 12:45 am • Post Author

@Jaime: mind-boggling, eh? sounds like a lot of work to me..

@Ryan: thanks for the targeting tip! :)

@Vladimir Carrer: cool, thanks for the feedback.

@Paul Irish: hey if it works, it works – validation is merely a tool, right?

@kcmr: I like the idea of using min-height:0 for IE7, but not height:1% for any browser because, even though it’s valid, it can produce unintended side-effects in certain layouts. Also, applying the clearfix to all divs may be overkill.

@Victor Teixeira: see this comment.

@Jorik: see this comment.

To all: Thank you everyone for the great feedback on this topic. Good to see everyone doing their own thinking instead of just taking my word for it. Cheers! :)

Jorik 2009/12/08 12:53 am

@jeff
True, that is sometimes a big problem..!

Justin 2009/12/08 4:40 pm

Hey Jeff, discovered your blog after picking up your new book with Chris Coyier, great stuff.

Question about the clearfix – it looks like you’re applying it directly to specific elements in your css as opposed to adding the class in the markup. Do you reccommend doing this instead?

Jeff Starr 2009/12/08 5:01 pm • Post Author

Hi Justin, good question – I think the code uses a .clearfix class that could be applied to any element in the markup, but you could also apply the fix directly to any existing element according to its class, id, or name. Either method works fine in my experience. Using a .clearfix class is useful when there are multiple elements that need the fix, but if it’s just a single instance, I would apply the fix directly.

Btw, nice to meet you, and thank you for picking up a copy of Digging into WordPress :)

Pete 2009/12/09 5:51 am

This is a great method that I’ve been using for a while with no problems: http://www.quirksmode.org/css/clearing.html

Justin 2009/12/09 6:08 am

Thanks Jeff, i’m just getting into WordPress, and I’ve picked up a lot from the book already, it’s been very helpful!

I’ve been using a blank div with a clear="both" until now, but think I’ll give this a try on my next project.

Jeff Starr 2009/12/09 8:15 am • Post Author

@Pete: yes, we have been over that several times now. See this comment for more information.

@Justin: awesome, great to hear it (on both points)! =)

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

Paul Irish 2009/12/07 1:27 pm

I obviously don’t read before I post.. sorry.

I’d just do a

.clearfix { *zoom: 1 }

But that’s me and my quick unvalidating hacks.
Vladimir Carrer 2009/12/07 12:41 pm

Thanks for the update. I will make all the test later for all my CSS Frameworks.
kcmr 2009/12/07 3:36 pm

I use min-height: 0 for IE 7 instead zoom: 1, and height: 1% for IE 6
This is valid CSS and has no effects for other browsers.

.clearfix{min-height: 0;} /* IE 7 */
* html .clearfix{height: 1%;} /* IE 6 */

I also aply this rules to all divs to avoid use continuosly the clearfix class in the HTML code.

div:after{... }
div{min-height:0;}
* html div{height: 1%;}
Victor Teixeira 2009/12/07 5:32 pm

hmmm… The clearfix that I use is like this:

.clearfix:after {
       clear:both;
       content:".";
       display:block;
       height:0;
       visibility:hidden;
}
.clearfix {
       min-height: 0;
       display: block;
}

And the IE6 part:

* html .clearfix {height: 1%;}
Jorik 2009/12/08 12:19 am

What about this? works in all browsers i believe…

.clearfix { overflow: hidden; }
/* ie part */
.clearfix { zoom: 1; }
Jeff Starr 2009/12/08 12:45 am • Post Author

@Jaime: mind-boggling, eh? sounds like a lot of work to me..

@Ryan: thanks for the targeting tip! :)

@Vladimir Carrer: cool, thanks for the feedback.

@Paul Irish: hey if it works, it works – validation is merely a tool, right?

@kcmr: I like the idea of using min-height:0 for IE7, but not height:1% for any browser because, even though it’s valid, it can produce unintended side-effects in certain layouts. Also, applying the clearfix to all divs may be overkill.

@Victor Teixeira: see this comment.

@Jorik: see this comment.

To all: Thank you everyone for the great feedback on this topic. Good to see everyone doing their own thinking instead of just taking my word for it. Cheers! :)
Jorik 2009/12/08 12:53 am

@jeff
True, that is sometimes a big problem..!
Justin 2009/12/08 4:40 pm

Hey Jeff, discovered your blog after picking up your new book with Chris Coyier, great stuff.

Question about the clearfix – it looks like you’re applying it directly to specific elements in your css as opposed to adding the class in the markup. Do you reccommend doing this instead?
Jeff Starr 2009/12/08 5:01 pm • Post Author

Hi Justin, good question – I think the code uses a .clearfix class that could be applied to any element in the markup, but you could also apply the fix directly to any existing element according to its class, id, or name. Either method works fine in my experience. Using a .clearfix class is useful when there are multiple elements that need the fix, but if it’s just a single instance, I would apply the fix directly.

Btw, nice to meet you, and thank you for picking up a copy of Digging into WordPress :)
Pete 2009/12/09 5:51 am

This is a great method that I’ve been using for a while with no problems: http://www.quirksmode.org/css/clearing.html
Justin 2009/12/09 6:08 am

Thanks Jeff, i’m just getting into WordPress, and I’ve picked up a lot from the book already, it’s been very helpful!

I’ve been using a blank div with a clear="both" until now, but think I’ll give this a try on my next project.
Jeff Starr 2009/12/09 8:15 am • Post Author

@Pete: yes, we have been over that several times now. See this comment for more information.

@Justin: awesome, great to hear it (on both points)! =)

« Previous Comments • 1234…13 • Newer Comments »