What is the best way to clear the CSS style "float"?
CssCss Problem Overview
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?
Css Solutions
Solution 1 - Css
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.
Solution 2 - Css
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;}
Solution 3 - Css
.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.
Solution 4 - Css
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.
Solution 5 - Css
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
Solution 6 - Css
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]
Solution 7 - Css
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.
Solution 8 - Css
.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>
Solution 9 - Css
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.
Solution 10 - Css
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.
Solution 11 - Css
<div class='float_left'>
something else
<br style="clear:both;">
</div>
this br will not leave a space.
Solution 12 - Css
<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.
Solution 13 - Css
Yet another is the "Float nearly everything" whereby you float the parent on the same side as the floated child.
Solution 14 - Css
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.