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

Update: In 2014, you should use a clearfix technique that utilized pseudo-elements, like the one mentioned by @RodrigoManguinho. This is the modern way of clearing floats. For an even more up to date method, see Nicholas Gallagher's micro clearfix:

/**  * For modern browsers  * 1. The space content is one way to avoid an Opera bug when the  *    contenteditable attribute is included anywhere else in the document.  *    Otherwise it causes space to appear at the top and bottom of elements  *    that are clearfixed.  * 2. The use of `table` rather than `block` is only necessary if using  *    `:before` to contain the top-margins of child elements.  */ .cf:before, .cf:after {     content: " "; /* 1 */     display: table; /* 2 */ }  .cf:after {     clear: both; }  /**  * For IE 6/7 only  * Include this rule to trigger hasLayout and contain floats.  */ .cf {     *zoom: 1; } 

Original Answer:

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.

See more info on using overflow instead of clear to avoid adding extra markup.

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;}