Is clearfix deprecated?

Question

You are aware of the age-old problem: Containers containing floated elements don't automatically expand their height to enclose their children.

One approach to fix this is the "clearfix" which adds a number of CSS rules to ensure a container stretches properly.

However, just giving the container overflow: hidden seems to work just as well, and with the same amount of browser compatibility.

According to this guide, both methods are compatible across all browsers that are important today.

Does this mean that "clearfix" is deprecated? Is there any advantage left in using it over overflow: hidden?

There is a very similar question here: What is the different between clearfix hack and overflow:hidden vs overflow:auto? but the question isn't really answered there.

Kulak

FWIW, I see both methods as hacks, strictly speaking. I will recommend using overflow over clearfix almost all the time though, because it's just much cleaner. Note that at the end of the day, the fact that overflow: hidden creates a new BFC allowing a box to contain its floats is still little more than a side effect, and not the original intended purpose of overflow. Remember, folks, it's called overflow, not float-contain or some such. – Bunghole

These answers may be worth reading if you're interested in the reasoning for such behavior with overflow: Why does overflow: hidden have the unexpected side-effect of growing in height to contain floated elements? and Why does CSS2.1 define overflow values other than “visible” to establish a new block formatting context? – Bunghole

It seems that overflow: hidden is better, but why do the folks over at the HTML5 Boilerplate still use it? .clearfix { *zoom: 1; } – Brent

Answer 1

You can pretty much use overflow: hidden all the time.

But, there are exceptions. Here's an example of one:

Overflowing a container div horizontally but not vertically

The question there was:

• There's a fixed height on this: http://jsfiddle.net/je8aS/2/
• Without the fixed height: http://jsfiddle.net/thirtydot/je8aS/5/
• How to clear the floats without using a fixed height?
• overflow: hidden doesn't work: http://jsfiddle.net/thirtydot/je8aS/6/
• You have to use some other method of clearing floats, such as clear: both:
  http://jsfiddle.net/je8aS/3/
• The clearfix class also works: http://jsfiddle.net/thirtydot/je8aS/11/

---

Here's a more important example of when you can't use overflow: hidden:

http://fordinteractive.com/misc/overflow/

That's not to say that clearfix is the only alternative - display: inline-block cleanly fixes that example:

http://jsbin.com/ubapog

Todd

The opening statement that overflow: hidden can be used all the time is later contradicted by a counter example. Maybe state the caveat and the alternatives in the first sentence? – Fe

Answer 2

As mentioned in another answer the downside to hidden is that it will, surprisingly ermm hide things like dropdown menus. However there is another way to contain with one line, by floating the parent container. This generally works where overflow: hidden has a downside, and also floating helps with a lot of legacy IE issues, again especially in lists. If you can use a width then I would use a "float in a float", or display: inline-block.

I'm not saying the "clearfix" has no use - but to me it's too widely entrenched into CMS themes (like Wordpress and Drupal) that I think in a lot of cases it's used too much and on divs that don't actually need to be cleared or contained.

I can't actually think of a situation where I can't use either overflow or float, over clearfix, but my brain's in holiday mode - but as it, clearfix, is a copy/paste solution that's sometimes the easiest thing to recommend, however it has to be the one which sets hasLayout for IE, which of course both overflow and float do too now as well.

---

added this has just come up again: and brain not in holiday mode..

I'm really starting to think yes, clearfix is not necessary (at least I haven't yet found an example where it is) even @thirtydot's example above can be worked around with display: inline-block and still have IE6 support, the container having a fixed width has the IE7 and below hasLayout requirement, and by making it an inline-block for all other browsers it can be centered and the "offset" sticky-out elements will work fine while the container does stretch vertically

Example

I've also seen reference to a new improved clearfix for those collapsing margins using :before as well as :after in the clearfix hack, but unless I'm missing something the the demo is flawed - there is uneven whitespace in the pre elements and the "clearfixed" boxes do not actually contain any floats, as soon as you do float the elements in them, each method performs the same.

Note margins on pre elements don't react the same as others anyway (so try it with padding instead of margin to see the same picture while testing).. and there is also another IE "foible" whereby IE doesn't contain margins properly if they're not explicitly specified and in the demo there is explicit margins on the h2 but not the p so all things being equal a clearfixed element as demo'd by TJK in that page is artificially forcing the containment of the margins on a normal block element, much the same way as 1px top/bottom padding would do because browsers do this differently anyway!

If you do then float the elements inside those containers (the point of clearing anyway) - the margins do then contain as you would probably like them to, as they would if inside a new Block Formatting Context - without any extra :before part to the hack, all clearfix variations work equally well!

See the demo reloaded

So to my mind there is no need for this "clearfix" way anymore, simply find the best way to create that new Block Formatting Context, using haslayout for older IE's.. the properties for both are the same!

as TJK does point out in his article : http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/

Better alternatives

If you can apply a width to the element containing floats, then your best option is to use:

display: inline-block; width: <any explicit value>;

I think that's fair and even with 100% elements which might need padding, you can do it in conjunction with box-sizing

.clearfix {
  display: inline-block;
  width: 100%;
  *width: auto;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

Saurel

Answer 3

overflow:hidden is very 'powerful' (I've been using it for several years, and I agree to what David said) but at the same time exposes to a problem. If i.e. inside the container you have some abs elements that you have to drag and drop outside of it, u won't be able to see them outside the container. In this particular case u need to use that 'clearfix' trick ;)

Ott

Ah, fair enough! That makes sense as to why it is still around, thanks. – Kulak

Answer 4

Yes, it's "deprecated" by CSS Display L3:

Created the flow and flow-root inner display types to better express flow layout display types and to create an explicit switch for making an element a BFC root. (This should eliminate the need for hacks like ::after { clear: both; } and overflow: hidden that are intended to accomplish this purpose.)

So now, the proper way is

display: flow-root;

Sadly it's a recent addition, so browsers haven't implemented it yet.

Afghan

Answer 5

I've been recommending the overflow: hidden method for many years. It is widely supported.

Kosse

The "clearfix" solution I link to uses a lot of browser-specific CSS and :after to avoid having to use an extra element. What I don't get is why they went through this when there was overflow: hidden all along. I suspect it was compatibility issues in really early browsers like IE5 or something. Anyway, if hidden works everywhere, there is no reason for using anything else any more. Thanks – Kulak

OK, I'm clearly tired and making too many assumptions. I love release Wednesday. Edited the answer so it doesn't mention irrelevant stuff. – Kosse

Answer 6

I recently discovered to my pleasant surprise that overflow:hidden works perfectly nowadays. I had been using the clearfix method up until around 6 months ago and it is quite bloated in comparison.

Pentameter

Answer 7

Note: Make sure you have the correct DOCTYPE set if you're just testing. Caught me out a few times and I always forget!

In IE9 for instance the following just won't work without <!DOCTYPE html> at the top.

<!DOCTYPE html>
<html>

<style>

#bottom_panel {
    overflow: hidden;
    background: orange;
    border:1px solid red;
}

#bottom_panel .col1 {
    background: red;
    float: left;
    width: 100px
}

#bottom_panel .col2 {
    background: yellow;
    float: left;
    width: 70px
}

#bottom_panel .col3 {
    background: green;
    float: left;
    width: 150px
}

.clear {
    clear: both;
}

</style>

<div id="bottom_panel">

    <div class="col1">this is col 1</div>
    <div class="col2">this is col 2. It's taller than the other columns because it's got more text in ot</div>
    <div class="col3">this is col 3</div>

</div>

<div>
This should not be floating around! Should be underneath the columns!
</div>

</html>

Tillotson

Answer 8

I wouldn't say that clearfixing is deprecated. However, I would say that most versions of the clearfix currently being used are outdated.

According to the experts, this is the version your should use today:

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

Illumine