Is clearfix deprecated?

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.

Solution 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

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