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 &nbsp; 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.

Posted at December 18, 2003 11:26 AM

Comments

Oleg Bezuglov said on December 18, 2003 12:02 PM

it’s simple and fine! thank you for thinking bout another “brick”

Andy Budd said on December 18, 2003 12:06 PM

?

pid said on December 18, 2003 2:50 PM

(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…

pid said on December 18, 2003 2:54 PM

(i know you didn’t use an nbsp, but many people do…)

Andy Budd said on December 18, 2003 3:31 PM

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.

Justin said on December 18, 2003 5:26 PM

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.

Funkatron said on December 19, 2003 3:45 AM

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??

benry said on December 19, 2003 4:38 AM

Another route:

div.spacer {
clear: both;
line-height: 0;
height: 0;
}

Scrivs said on December 19, 2003 5:17 AM

I use a with a spacer class within because I found out the hard way that &nbsp does indeed have a height associated with it.

Quasi said on December 21, 2003 10:44 PM

There is a more in-depth description of how floats work at: http://www.complexspiral.com/publications/containing-floats/ for those interested.

Aleksandar Vacic said on December 23, 2003 9:41 AM

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:

david said on December 24, 2003 2:38 PM

yea thats a good poem
messsage owes money

so christmas cac come early

Jerry said on August 17, 2005 4:25 AM

hello,

Thanks for your articles which help me in my work

Bye
Jerry