Self Clearing Floats
June 6th, 2008The ‘clearfix’ or self-clearing method as published at Position is Everything, is my favorite method for clearing floated elements. My only quarrel with it is that it requires you to add the class ‘clearfix’ (or whatever you have renamed the class to) to the parent container of the floated elements. While this is not such a big deal if you only have one or two containers that require the class, it can quickly get unwieldy in a document that has multiple containers embodying floated elements that need to be cleared.
My preferred method is to add the necessary clearfix rules to each element as needed in the external CSS file. It helps reduce ‘classitis’ and keeps the HTML document from getting cluttered with extra class names that have no structural meaning.
For example, if there were, say, 5 divs that needed the clearfix technique, we would apply the following rules to our style sheet:
#div1:after, #div2:after, div#3:after, div#4:after, div#5:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
And we’re done! Well, that is if we don’t plan on supporting IE6 or IE7. Those two browsers require some additional rules to cooperate because we need to trigger hasLayout for the auto clearing to kick in. Fortunately, that’s pretty easy to do:
#div1, #div2, div#3, div#4, div#5 {
min-height: 1%;
display: inline-block;
}
min-height alone will do the trick in IE7, but it’s older sibling needs more help, which accounts for the display: inline-block; bit. The above should be included in our separate IE style sheet so that only IE 7 and below see it. This will keep FireFox 2 from chucking up errors in the console when it doesn’t understand the inline-block; rule we’ve applied to the global clearfix class, plus it has the advantage of keeping our IE hacks, filters, patches etc. from overriding anything in our master style sheet.
But, wait there’s more! If we don’t want to use the clearfix method and we STILL want a self-clearing element, we can also apply overflow:hidden; to the element shrink-wrapping the floats. One thing to beware of here though is that negative margins won’t work. I first discovered this handy trick courtesy of Jonathan Snook’s Top CSS Tips write-up.
In a similar fashion, setting overflow: auto; also seems to work. This technique can produce unwanted scrollbars if not used with care, so be on the look out for that. Alex Walker covers this technique in some detail in his article, Simple Clearing of Floats.
Ultimately, there are lots of options for clearing floats - usually the task at hand dictates the best technique. Call me old fashioned, but I still like to include a rule in my master style sheet that will apply to a non-semantic element in the HTML document, just in case I need it. You’ve all seen this guy before:
.clear {
clear: both;
}
I keep him around in case the parent container of the floated elements experiences unwanted vertical margin collapsing. I generally use this pretty sparingly, but on a large site, it could turn up in the source code here or there, causing someone to poke me in the ribs and ask why it’s there. Now you know. And unless I’ve been misled up until now, knowing is half the battle.
Sometimes as front-end developers, we have to use a little necessary evil. When that happens, learn to forgive yourself and move on: your therapist will thank you.
