Journal
Clearing Floats
2006-11-17 › 9 comments
If you are already a seasoned CSS veteran, feel free to stop reading now. That being said, from time to time via email, in-person conversations, or on the Godbit forum, the question of how to clear floated elements is a reoccurring one. Many of these methods are quite complicated: inserting content via CSS, and / or using multiple forward or backslash hacks in an effort to keep the cleared element out of the actual HTML markup.
This is all well and good, but I am a simple (read: lazy) person and like reusable solutions, without having to worry if the next new viewing device will break because it gets caught up on some CSS hack used for an antiquated browser. I also have a problem with inserting content via CSS and forcing that the element to clear floats, because said content still occupies space. That’s really not a big deal, but if you are going for pixel-perfect precision (say that ten times fast), then it can throw off your layout ever so slightly.
So, while this is probably something that many of you do already, I figured I would share the way I clear floats, in case anyone is interested. It should be noted that usually I will try to use elements that really need to be in a document, such as a footer div or perhaps an hr, but sometimes all you really need to do is clear a few floats and move on with your day. Here is the code I use to do that, followed by a detailed explanation as to why.
This clearing method works equally well with a div or span span tag, in case you need to clear floated elements within something like a paragraph, in which case a div would be invalid. Using a span is valid 99.9% of the time, even within inline elements. In XHTML 1.0 Strict, span is invalid only if it lacks a block-level container, making it an immediate child of the body tag.
HTML:
<div class="clear"> </div><!-- or --><span class="clear"> </div>
CSS – ultra light:
.clear
{
clear: both;
display: block;
overflow: hidden;
;
;
}
CSS – overkill:
.clear
{
border: 0;
clear: both;
display: block;
float: none;
margin: 0;
overflow: hidden;
visibility: hidden;
;
;
}
The first CSS example is probably the bare minimum you will need. Basically, it says “Make this have zero size, and if there’s anything inside don’t show it.” The second example goes overboard, to ensure that if there is any universal border, margin, width or height – then they are all reset to zero.
Also, the float has been set to none, in case the div’s in that container element have all been set to float left or right. The display has been set to block, even though that is the default, just in case inline was set universally to keep margin from doubling-up, due to a bug in Internet Explorer 5 + 6.
Plus, the visibility is set to hidden just to make sure that nothing appears. This shouldn’t be confused with display: none, because that causes it to be removed from the document entirely, negating any float-clearing benefits. Obviously, you won’t need every property and value. Just be aware of how descendant selectors might affect your clearing div via inheritance.
You may be wondering – “Why have any content inside the div at all?” Good question. Some browsers choke on empty elements, and do not render them. Incidentally, this is why old-school Dreamweaver puts in empty table cells. So, the non-breaking space is there to ensure that the div is actually in the document, and causes floats to clear. It is an innocuous bit of content, since screen readers will merely treat it as a breath, not enunciating it.
Anyway, for what it’s worth, that’s how I clear floats. Take it or leave it.
Discussion + Dissension
#1 Thame
Cool article…I like the other method too.
Also, I’ve found that you can have the same effect as a space by just placing comments inside the div. It works fine and has a lighter semantic impact.
#2 David Sutoyo
Ah…that, er, clears up some things for me. :)
#3 Nathan Smith
Thame: Yup, that’s the method I was referring to, though “Easy Clearing” is not exactly the description I would have given it. As for HTML comments inside the div, I’m not a big fan of that, since technically browsers are supposed to ignore the commented-out text completely. If browser vendors decided to treat comments correctly, then the div wouldn’t render.
David: Ha! – Nice play on words there.
#4 Jeff Croft
I do something very similar, but I tend to use the br element with a class applied. Like you, I call the class “clear” and do basically the same CSS rules there.
I guess the br element feels like it has a little bit of semantic meaning, since an item whose sole purpose is to clear floats is similar in concept to a line break. But, the div element works fine, too.
These are the types of things you have to do in the real world, when you have real projects with real deadlines. It might not be the prettiest, most semantic thing of beauty ever — but it works, and sometimes that’s “good enough.”
#5 Nathan Smith
Jeff: That’s what I used to do, but I’ve found that in some browsers, the br solution causes there to be unanticipated line-height, where there really shouldn’t be. Since it’s a self-closing tag, you can’t affect its dimensions. Also, I have heard that Opera 8 has trouble with br when it has a class applied.
#6 Eric
Well this was good to see… I actually knew what you were talking about, and use it regularly. Maybe I’m finally starting to become proficient at this CSS business. Thanks Nathan.
#7 Michael Montgomery
As I had mentioned to Nathan, I prefer not to add the Div +   to the markup.
I then proposed a nifty (I thought) method of clearing hr elements. After long discussions (including a test page by the good doctor Smith), I’ve learned my proposed method is totally wrecked by IE6.
So, the decision tree now seems to be:
* non-semantic div +  , or
* :after content + conditional comment with a hack
::sigh::
#8 Nathan Smith
Yeah, not only is HR messed up by IE6 but also IE7. There seems to be phantom margin added no matter what is done, including setting . Just in case anyone is curious, here is the simple demo page I set up:
sonspring.com/files/hr_test.html
View that page in either IE6 or IE7 to see the buggy phantom spacing.
#9 Huid Alama
Good article. Floats and clearing always get me stuck and they are the key to good layouts.
Note: Comments are closed.
Recently, I had the privilege of co-authoring Textpattern Solutions for the web technology publisher Friends of ED. If you want to develop a professional dynamic web site, without the hassle of coding it from scratch, then Textpattern could be just the solution you are looking for.