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.
The clearfix property is generally used in float layouts where elements are floated to be stacked horizontally. The CSS float property states how an element should float; i.e., it specifies the position where an element should be placed. The clearfix property allows a container to wrap its floated children.
The clearfix, for those unaware, is a CSS hack that solves a persistent bug that occurs when two floated elements are stacked next to each other. When elements are aligned this way, the parent container ends up with a height of 0, and it can easily wreak havoc on a layout.
A clearfix is a way for an element to automatically clear or fix its elements so that it does not need to add additional markup. It is generally used in float layouts where elements are floated to be stacked horizontally.
Left and Right can be used to only clear the float from one direction respectively. None is the default, which is typically unnecessary unless removing a clear value from a cascade.
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:
overflow: hidden
doesn't work: http://jsfiddle.net/thirtydot/je8aS/6/ clear: both
: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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With