CSS Crib sheet #2 - Clearing Floats | December 18, 2003
When floating elements it's fairly common to add an element to your document who's sole purpose is to clear the preceding float.
In a site I'm currently building, our developer added a <br class="clear" /> element to do this job. It worked fine in Safari but in IE/Win it would only clear the preceding float, not all the floats.
I thought the problem was down to the fact that the <br /> was inline, so a changed it to block. However it still didn't work in IE. It would have been nicer semantically to have been able to use a <br />, however in the end I resorted to using a block level element. We actually used a <p> containing a but normally I'd do this:
.clear {
clear: both;
height: 0;
}
<div class="clear"><!-- --></div>
Which has the added benefit of leaving no vertical space. something which can be quite important in certain layouts.
Comment
it’s simple and fine! thank you for thinking bout another “brick”
Comment
(quite.)
Andy, doesn’t an nbsp character have a height associated with it that will still cause unpredictable results?
I’m struggling to find an example here, but I’m sure I’ve had to load additional attributes into a CSS class before now, to ensure that enough browsers behave the same way.
I’m thinking I’ve had to set overflow:hidden, as well as setting clear and height on a DIV…
Comment
(i know you didn’t use an nbsp, but many people do…)
Comment
Yes. If you put a no breaking space in a p tag it’ll have some height and this can cause problems in layouts where you don’t want this height to display, hence my general use of an empty comment. It’s a bit of a nasty hack, but it seems to do the trick.
Comment
I find that whenever I use any empty div (just as you stated actually) this IE has a bug of some sort causing all the text ahead of it to not display. It shows up if highlighted or refreshed a few times, but that bug no longer allows me to use this method. Now I just float the containing element.
Comment
I ran into trouble with floating and clearing and CSS3:
I wanted to float some divs in a larger “container” div. So when I coded the floating, I did this:
#container>div{
float: left
…….
}
div.clear{
clear:both;
}
I wanted to save a few bytes and not do classes but instead use parent>child selecters. But for some wierd reason, the div with the class .clear would not clear. It seems it inherits something from my generic #container>div selecter. I’ve tried float:none. I’ve tried explicitely displaying it as a block. Nothing seems to work. Anyone have tried this??
Comment
Another route:
div.spacer {
clear: both;
line-height: 0;
height: 0;
}
Comment
I use a with a spacer class within because I found out the hard way that   does indeed have a height associated with it.
Comment
There is a more in-depth description of how floats work at: http://www.complexspiral.com/publications/containing-floats/ for those interested.
Comment
I usually place inside of the clearing div with the following style:
.clearer {
height: 0;
line-height: 0;
clear: both;
}
This works in everything but IE/Win, which requires font-size to be 0 too. But then, it creates a problem with Gecko (did not check with others) which does not render background colour if all elements in the container are flaoted. Luckily, this helps:
- html .clearer {
font-size: 0;
}
Comment
yea thats a good poem
messsage owes money
so christmas cac come early
Comment
hello,
Thanks for your articles which help me in my work
Bye
Jerry
Comments on: CSS Crib sheet #2 - Clearing Floats
Jump to the comment form