Clearing floats

[csdude55]

I know of 3 separate ways to clear a float, I'm curious which one you guys think is best?

// Option 1
<div style="overflow: hidden">
 <div style="float: left">Whatever</div>
 <div style="float: left">Whatever Else</div>
</div>

// Option 2
<div style="float: left">Whatever</div>
<div style="float: right">Whatever Else</div>
<div style="clear: both"></div>

// Option 3
.clear:after {
 clear: both;
 content: '';
 display: table
}

<div class="clear">
 <div style="float: left">Whatever</div>
 <div style="float: left">Whatever Else</div>
</div>

I've used the second one forever (clear: both), but with my rebuild I started using the third one. But now I realize that pseudo classes like :after are pretty much the slowest to process, so I'm debating on whether to change it to the first one (overflow: hidden? That feels more like a hack than a real way to clear the floats, but it seems pretty mainstream, too.

[not2easy]

The explicit clear of Option 2 would be my choice. I don't like using hidden because it doesn't clear the float(s) but just hides the result.

[ergophobe]

I used to like option 1, which is elegant and follows the CSS spec (i.e. it's not a hack, which means it's future-proof) and does not require and extra div. In the old days, you needed to add a height rule too in order to get it to work in IE and Opera, but I don't think that's true now.

Option 2 is my go to if I'm in a hurry and it just has to work.

But I feel like people typically go for a variation of #3 now, as in Bootstrap or Foundation. So typically that's what I'm using these days. I think it has become the de facto standard

[ergophobe]

@not2easy - actually that's formally correct (it doesn't *clear*), but it does work and is provided for in the spec. It is a method for effectively controlling flow in floats and the "hidden" declaration is only because in the old days you could get scroll bars from IE.

[raisedbyturtles.org...]

[csdude55]

@not2easy, I always thought the same thing, but now it's my understanding that float changes the block formatting context, and overflow: hidden or overflow: auto changes it back:

[w3.org...]

These elements all change the block formatting context:
float

display: inline-block
display: inline-table
display: table-cell
display: table-caption

position: absolute
position: fixed

overflow: hidden
overflow: auto
overflow: scroll (and the same for overflow-x and overflow-y)

So it's sort of a side effect of using overflow that it changes the block formatting context, but you could use any of the above and it would do the same thing.

This information originally came to my attention from this unknown blog, but after finding it I was able to find similar information across the web:

[colinaarts-com.herokuapp.com...]

It's also notable that benchmark tests show pseudo classes to be like 1ms slower than a class, so while it's "technically" the slowest... 1ms is pretty irrelevant, even to me. But if 1 line of "overflow: hidden" does the same as 3 lines in a pseudo class, then I'm not sure why the heavier option is becoming the de facto standard.

[jane_eyre]

I don't think anyone uses floats anymore, why not use grid or flexbox?

[NickMNS]

I don't think anyone uses floats anymore, why not use grid or flexbox?

While typically I would fully agree with your statement, in this case the OP needs an IE9 compatible solution. (This wasn't stated here but in another thread that spawned this one.)

[csdude55]

For future readers, I realized that there's at least one caveat with using overflow: hidden to clear the floats. It's obvious in retrospect, but I didn't think about it until now.

I had an element that's a container, and inside the container I have an empty DIV that's the target for an Ajax script. So it looks like this:

<style>
.clr { overflow: hidden }

<script>
// using jQuery, but I don't think that's an issue for this example
$(function() {
 $('#bar').ajax('whatever.php');
});
</script>

<div id="foo" class="clr">
 <div id="bar" style="float: left"></div>
 <div id="bar_2" style="float: right"></div>
</div>

When the page initially loads there's no width and height for #bar, so it just fits the defaults. But when the Ajax script loads, it can change that width and height. So when the container has overflow: hidden set and the Ajax script is larger than the default... it cuts off the excess. Which, of course, it should.

Changing .clr back to Option #3 (with the :after pseudoclass) fixed that.

I could have potentially set a width and height for the container, of course, but in my case it could vary so that's not really a reasonable solution. Especially when using :after was an easy fix.