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

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

Answer 3

.clear-fix:after
{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clear-fix
{
zoom: 1;
}
<div class="clear-fix">
<div class="left">Some Div With Float</div>
<div class="left">Another Div With Float</div>
</div>
In my opinion this is the best way. No need of extra DOM elements or wrong usage of overflow or any hacks.

Answer 4

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 5

The best way is put "overflow:auto;" in div container. It is more clean.
div.container {overflow: auto;}
more details in: http://www.quirksmode.org/css/clearing.html

Answer 6

Simply adding overflow:auto; to the parent element containing the floating element(s) is an excellent fix in most cases.
SAMPLE HTML:
<div class="container">
<div class="child">...</div>
<div class="another-child">...</div>
<div>
CSS:
.child {
float: right;
word-wrap: break-word;
}
.child img {
max-width: 100%;
height: auto; /* of course, this is default */
}
.child p {
word-wrap: break-word;
}
.container {
overflow: auto;
}
As with any other method, there are some gotchas with overflow:auto; as well. In order to fix them — apply max-width:100%; height: auto; for images, and word-wrap: break-word; for text contained within the floating elements.
[source]

Answer 7

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 8

Now, in 2021, you can use display: flow-root for parent element instead of clearfix hack.
.box {
display: flow-root;
}
As of March 2021, 91.35% of browsers worldwide can handle display: flow-root, based on Can I Use data.

Answer 9

.floatWrapper {
overflow:hidden;
width:100%;
height:100%;
}
.floatLeft {
float:left;
}
<div class="floatWrapper">
<div class="floatLeft">
Hello World!
</div>
<div class="floatLeft">
Whazzzup!
</div>
</div>

Answer 10

The issue is with parent elements not adjusting to the height of its floated child elements. Best method I have found is to float the parent to force it to adjust with the heights of its floated child elements, then apply your css clear to the next element you actually want to clear. It's often necessary to add width:100% too, as without floating the parent may unexpectedly change your layout.
As others have mentioned, its semantically best to avoid markup that is unrelated to your content such as a <br> or <div> with a clearfix class.

Answer 11

<div class='float_left'>
something else
<br style="clear:both;">
</div>
this br will not leave a space.

Answer 12

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

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

Answer 14

I prefer using with .clear { clear: both; } over .clear-fix:after blah blah, because when you look at the markup it's clearer what's happening. Just FYI here's my tutorial on how to use float and clear that I wrote a while ago.