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.
Answer
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: hiddendoesn'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: