What is the best way to clear the CSS style "float"?

Question

I'm pretty accustomed to clearing my floats by using <br style="clear:both"/> but stuff keeps on changing and I am not sure if this is the best practice.

There is a CSS hack (from positioneverything) available that lets you achieve the same result without the clearing div. But... they claim the hack is a little out of date and instead you perhaps should look at this hack. But.. after reading through 700 pages of comments :) it seems there may be some places the latter hack does not work.

I would like to avoid any javascript hacks cause I would like my clearing to work regardless of javascript being enabled.

What is the current best practice for clearing divs in a browser independent way?

Answer 1

You may want to look at how some CSS frameworks handle this. Here's blueprint's (look at the end of the code).

Answer 2

I've found that most often (myself included), this method is used in the html:

<div class="clear"></div>

With this in the stylesheet:

.clear {clear: both;}

Answer 3

there's a bit of voodoo I tend to find myself using.

<span class="clear"></span> 

span.clear { 
    display: block; 
    clear: both; 
    width: 1px; 
    height: 0.001%;
    font-size: 0px; 
    line-height: 0px; 
}

This combination magically fixes a whole host of browser problems, and I've just used it for so long I've forgotten what problems it solves.

Answer 4

jQuery UI has some classes to fix this as well (ui-help-clearfix does something).

Technically <div style="clear:both;"></div> is better than <br style="clear:both;" /> because an empty div will have 0 height, thereby just clearing the floats. The <br /> will leave a space. I see nothing wrong with using the <div/> method.

Answer 5

I'm from the <br class='clear'/> school myself, but another solution might be to use the clear class on the element immediately following the floated one. So instead of:

<div class='float_left'>...</div>
<br class='clear'/>
<div class='something_else'>...</div>

You could assign multiple classes to the element you want cleared:

<div class='float_left'>...</div>
<div class='something_else clear'>...</div>

In practice though, I tend to use <br class='clear'/> pretty often. It works nicely when you have an element floating inside another element and need to clear it so that the parent recognizes the height of the content.

Answer 6

<br clear="all"/>

works well aswell. The benefit to this over using class="clear" is that it just works and you don't have to setup extra rules in your css to make it so.

Answer 7

Really you should use class that way you can re-use your clear both anywhere in your html see below example. I tend to use my class="clearBoth" in a line break tag
but I'm sure you can use it in any tag, best just to test it and with class you can test it anywhere by adding the class="clearBoth" or whatever you decided to call it attribute.

Example:

CSS:

.clearBoth { 
clear: both; }

The . denotes it can be used as a class.

HTML

<br class="clearBoth"/>

Referancing the CSS using the class="" attribute and ending the tag for xhtml validation.

Hope this helps.

Cool Hand Luke

Ps w3schools is always a handy way of find out such information W3Schools

Answer 8

I really don't like using extra non-semantic markup, so I stay away from using a clearing element. Instead of just apply overflow: hidden; to the parent of the float(s) to clear them. Works cross browser, no problem. I believe overflow: auto; also works.

Obviously, it won't work if you want to use a different overflow property, but because of the IE6 expanding box bug, I rarely have a reason to purposely overflow my containers.

Answer 9

Yet another is the "Float nearly everything" whereby you float the parent on the same side as the floated child.