CSS Hackz Series: Clearing Floats with the Clearfix Hack
Published Wednesday, June 18, 2008 @ 8:59 am • 10 Responses
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:
First 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 */Second clearfix method: highly refined version of the original clearfix hack 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 in the CSS Hackz Series: Targeting and Filtering Internet Explorer 7! Stay tuned!
About this article
Related articles
- Lessons Learned Concerning the Clearfix CSS Hack
- Perishable Press CSS Hackz Series Summary
- CSS Hack Dumpster
- CSS Hackz Series: PNG Fix for Internet Explorer
- CSS Hackz Series: Targeting and Filtering Internet Explorer 7
- CSS Hackz Series: Minimum Width, Maximum Width for Internet Explorer 6
- Beware of Margins or Padding when Using the min-width Hack for IE
Dialogue
10 Responses Jump to comment form
June 19, 2008 at 12:50 am
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.
June 19, 2008 at 3:09 am
Does anyone actually use IE Mac any more? I’m getting fed up of seeing people still putting this hack in their code. Fail.
June 19, 2008 at 7:10 am
@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!
June 20, 2008 at 11:32 am
I don’t remember how I found your blog but I’m really glad I subscribed.
Thanks for the tips
- Eric
June 26, 2008 at 1:58 am
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.
Share your thoughts..
← Previous post • Next post →
« Perishable Press HTAccess Spring Cleaning, Part 2 • Spanish Version of Contact Coldform Released »
1 • Louis
June 18, 2008 at 1:47 pm
Great memo, thank you Jeff.