Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is clearfix deprecated?

Tags:

html

css

clearfix

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.

like image 965
Pekka Avatar asked Apr 06 '11 11:04

Pekka


People also ask

When should I use Clearfix?

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.

What problem does Clearfix fix?

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.

Why we use Clearfix after?

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.

What are two valid techniques used to clear floats?

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.


1 Answers

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

like image 54
thirtydot Avatar answered Sep 21 '22 12:09

thirtydot