59

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?

Michael Haren
  • 105,752
  • 40
  • 168
  • 205
Sam Saffron
  • 128,308
  • 78
  • 326
  • 506
  • 1
    When I read this title, I thought it was going to be a stupid question, answered with "float f = 0.0". My apologies, I haven't had my coffee this morning yet :-) – paxdiablo Jan 29 '09 at 01:36
  • Anyway, the answer to any question with "Javascript" and "browser independent" is jQuery. – paxdiablo Jan 29 '09 at 01:37
  • @Pax: me too. I edited the title. – Michael Haren Jan 29 '09 at 01:51
  • 2
    @SamSaffron The links in your question point to pages that contain multiple solutions for clearing floats. So, it is not clear which methods you are referring to... (btw, I believe `overflow:auto` on the parent is the best solution) – Šime Vidas Dec 09 '11 at 13:45

14 Answers14

58

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.

Bryan M.
  • 17,142
  • 8
  • 46
  • 60
27

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;}
Michael Haren
  • 105,752
  • 40
  • 168
  • 205
Mike
  • 398
  • 3
  • 9
  • No, I don't think so; because he's using a DIV, you'll need to use a dot. – Pat Hermens Jan 29 '09 at 03:00
  • Dot should be in stylesheet only - it's been fixed now. – noswonky Jan 29 '09 at 04:09
  • how is `class="clear"` any better than `style="clear:both"` if there's zero chance that the style for .clear will ever change? Simply adding a layer of indirection doesn't actually equate to better design. – tylerl Mar 08 '10 at 00:27
  • 1
    @tylerl, for various reasons the separation of semantic and presentational markup is encouraged. There's even some debate about removing the attribute `style` from strict document types. – Geoff May 12 '10 at 15:11
  • 2
    @tylerl I agree, people often forget that indirection can hurt clarity. And I think "separating semantics & presentation" is overrated (but that's a whole other debate). But in this case, the class saves a bit of typing (I use 'class=cb' which is smaller). – Dustin Boswell Nov 10 '10 at 07:47
  • 2
    Separate things is, yes, a nice and useful pattern. Let's say Internet Explorer 10 comes with a new bug (what is not so difficult), where you need to put zoom: 1 to clear float (just a fake example, to ilustrate). If you use style="clear: both", you will need to update thousands of lines of code to add the "zoom: 1" to make it work on IE10. Who uses class="clear" will need to update 1 line in CSS. – Rodrigo Manguinho Dec 14 '11 at 17:39
23
.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.

Rodrigo Manguinho
  • 1,411
  • 3
  • 21
  • 27
  • 3
    I think this is the most beautiful solution. If you're going for this one, please don't forget to add this in a IE specific stylesheet, otherwise IE 7 will be sad. .clear-fix { zoom: 1; } – Filip Dec 09 '11 at 13:44
  • You are right Filip. I edited my response for the complete solution. +1 for your observation. – Rodrigo Manguinho Dec 09 '11 at 15:43
  • 1
    Have been using this since the dawn of times. In 2012, is this really still the authoritative solution??? I was hoping 5 generations of newer browsers would have made a more direct solution possible... – jgivoni May 02 '12 at 13:48
  • This is not the best solution. If you use this method to clear floats that are themselves inside in a floated element, then clear:both causes giant gaps . Use overflow: hidden when you can. This is only useful for when you need visible overflow in your floats. – mrbinky3000 May 08 '14 at 19:58
8

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.

Kent Fredric
  • 56,416
  • 14
  • 107
  • 150
4

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

user391990
  • 95
  • 5
3

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]

its_me
  • 10,998
  • 25
  • 82
  • 130
2

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.

goldenratio
  • 1,026
  • 14
  • 24
2

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.

alihardan
  • 183
  • 1
  • 14
1

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.

scottsanders
  • 388
  • 2
  • 12
1
.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>
mrbinky3000
  • 4,055
  • 8
  • 43
  • 54
  • 1
    came back here after years... you don't need the width:100% or height:100% anymore, just overflow:hidden on the parent container. – mrbinky3000 May 08 '14 at 19:49
0
<div class='float_left'>

something else


<br style="clear:both;">
</div>

this br will not leave a space.

user3808806
  • 1
  • 3
    Welcome to SO! There are already many answers to this question, can you please explain why or in which use cases your answer is better than the existing ones? Or why would someone use this solution rather than the existing ones? – Djizeus Jul 06 '14 at 03:32
  • Your answer is pretty much what @Mike said. – Alexandre Santos Jul 06 '14 at 03:42
-1

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.

shingokko
  • 404
  • 3
  • 7
-1

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

Billy
  • 198
  • 2
  • 8
-1
<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.

Birk
  • 2,173
  • 4
  • 21
  • 26