CSS Hackz Series: Clearing Floats with the Clearfix Hack
I use the CSS clearfix hack on nearly all of my sites. The clearfix hack — also known as the “Easy Clearing Hack” — is used to clear floated divisions (divs) without using structural markup. It is very effective in resolving layout issues and browser inconsistencies without the need to mix structure with presentation. There are countless variations of the clearfix hack around the Web, and for some sad reason, I keep a file updated with all of them. Recent pruning of my clearfix collection yields two excellent float-clearing techniques:
Clearfix method #1
This clearfix method addresses several reported rendering and display bugs by declaring very small values for both font-size and height, while also declaring a zero line-height value. A little paranoid perhaps, but the unique declarations seem to have no unintended/negative side-effects. This method also targets IE exclusively for the inline-block declaration. Check it out:
/* effective yet slightly paranoid clearfix hack */
.clearfix:after {
visibility: hidden;
font-size: 0.1em;
display: block;
line-height: 0;
height: 0.1px;
content: " ";
clear: both;
}
* html .clearfix { display: inline-block; }
/* hide from ie mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* end hide from ie mac */Clearfix method #2
This clearfix method is a highly refined version of the original clearfix hack (404 link removed 2013/03/03) by yours truly. This slightly enhanced, universal clearfix hack avoids unnecessary declarations and is perfect for clearing floats virtually anywhere and everywhere. I use this exact code on many different sites:
/* slightly enhanced, universal clearfix hack */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* stop commented backslash hack */Next up..
Next up in the new CSS Hackz Series: Targeting and Filtering Internet Explorer 7.
10 responses to “CSS Hackz Series: Clearing Floats with the Clearfix Hack”
Great memo, thank you Jeff.
Thanks for the clearfix hack, Jeff! Although I’ve heard of it before, I only implement it in certain conditions when the clar:both attribute didn’t help.
But you right about the not mixing up content and styling – I extensive use
<div style="clear:both"></div>throughout my design. It doesn’t work for WordPress’ richtext editor because WordPress simply removes blank spaces. Clearfix will be the best solution if you want to clear certain floated content in a WordPress post or page.Does anyone actually use IE Mac any more? I’m getting fed up of seeing people still putting this hack in their code. Fail.
@Andy – According to stats on one of my sites, about 6% of my visitors use ie/mac- small percentage to be sure, but why not make the site use-able for as many people as you can? Especially when the fix is so easy, valid and semantic.
Cheers Jeff, this is a great little hack!
I don’t remember how I found your blog but I’m really glad I subscribed.
Thanks for the tips
– Eric
@Louis, @teddY: Thanks for the feedback, it really is great to have such excellent readers! Sorry about the delay in getting back to some of these comments, it has been an insanely busy month around here. That said, your comments are definitely appreciated! Great point about the WordPress rich-text editor as well, teddY — thank you! :)
@Andy: trust me, I am just as sick and tired as you are when it comes to accommodating old broken browsers, especially IE Mac and IE 6. We hates them, really. Nonetheless, as Travis so eloquently explains, people should come first when it comes to providing information and delivering content. According to my statistics, there remain a modest number of folks out there still using IE/Mac, and quite a bit more using IE 6, obviously. Without putting a gun to anybody’s head and forcing them to upgrade their browser, it is necessary to use any means necessary to deliver consistent, usable, and accessible web design to as many browsers as possible. Thus, even though the clearfix hack is a bit unsightly on the eyes, it accomplishes this goal as Travis says, with a fix that is “easy, valid and semantic.” It’s a “win-win,” in my book ;)
@Eric: Thank you — you just made my day! :)
For a long time now I’ve been using the overflow way of clearing, which basically involves:
1. Set the parent container to ‘overflow: hidden;’ (or anything other than ‘auto’). This forces the browser to calculate where the container should end as it needs to know where to start clipping (although this never actually happens unless you give it a static height).
2. Give the container a ‘width: 100%;’, or anything else that throws IE6 into layout mode. This will make IE6 interpret the overflow in the same way as other browsers.
This works in all cases I’ve encountered so far, but is only tested in IE6, IE7, Firefox, Safari, and Opera.
If anyone wants to discuss the pros/cons of this method and suggest improvements it’d be appreciated as the clearfix method seems very bulky in comparison.
Hi Ryan, I have used the
overflow:hiddenmethod on one of my other themes for this site. It works well in most browsers, however in Firefox it causes the vertical scrollbar to disappear when the width of the browser window is smaller than that of the floated division. The second method I have not yet tried, although in my experience settingwidth:100%tends to produce unwanted side-effects, especially in complex layouts. Nonetheless, these are both good techniques, and I plan on exploring the second method more fully in subsequent designs. Thanks for the info! :)