Is Clearfix Deprecated

Is clearfix deprecated?

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

.clearfix still needed?

You don't need to use all that for modern browsers.

Simply using overflow: hidden works and is sufficient in 99% of cases.

See this relevant question that discusses this in depth:

• Is clearfix deprecated?

Can I use flexbox to give an element layout, and therefore deprecate clearfix?

A flexed item will scale with the size of its children assuming you don't set a specific height, so you won't need to rely on float, or by extension clearfix. I've got a pen where I'm playing with flex at the moment.

The rules I'm using are:

.parent {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-content: space-between;
}
.child {
  margin-bottom: 1.5%;
}

And then for each child, I'm specifying a width that I want it to fill.

For these rules, display:flex tells the parent to display as a flexbox. flex-flow is a short-hand for flex-direction and flex-wrap - in this case I'm telling the parent to have its children sit in a row, and when they reach the end of the available width, wrap down to the next line. justify-content: space-between helps with horizontal spacing between the children, removing the need to cancel a margin at the end of the row. align-content: space-between helps add some vertical spacing. I've found that I do have to add margin-bottom onto the children just to create a little white space.

A quick caveat, though, is that if you do still need to use floats for whatever reason, it would be good to clear them still.

.clearfix class vs :after

With the use of :after, one must considered the cross-browser issue. If we are to provide support for all browsers, including old ones, pseudo-elements may not be the way:

CSS selectors and pseudo selectors browser compatibility

---

Related to generic class vs specific class

By definition:

A generic class can be applied to any element in the markup, is best suited for use with generic formatting instructions that all elements will support, or for formatting instructions that need to be used on several types of element.

A specific class serves its purpose by only being applied to a specific element in the markup is best suited for formatting instructions which are specific to only one type of element.

The goals for using a Generic Class over a Specific one are: ^{among others}

1. Cleaner markup
2. Reutilization
3. Smaller files (browser contents download performance)
4. Easy to maintain or update

Best clearfix ever?

I think that's a bad idea. Are you really going to trust somebody who seemingly forgot to do this:

article, aside, div, footer, form, header, nav, section, ul { zoom:1; }

Clearing floats is not a complicated thing to get right.

It should be handled on a case-by-case basis, not sledge-hammered onto "every" element.

Doing that will come back to bite you in some way, I'm sure of it.

For one thing, I agree with @Guffa's answer.

---

An edge case reason against it concerns IE7: http://www.satzansatz.de/cssd/onhavinglayout.html

zoom: 1 is a common method to provide something known as hasLayout to elements. Applying hasLayout to an element fixes certain kinds of rendering problems, but it can also cause other problems. A quote from the linked document:

Don't give layout to all. Poison in that concentration,
having layout is not the cure, it
changes the rendering fundamentally.

---

I personally like to use the overflow: hidden method to contain floats. When that doesn't work, then I use clearfix.

You should use the version of clearfix from http://html5boilerplate.com/:

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

clear both or overflow hidden , a clearfix solution

overflow:hidden makes the element establish a new block formatting context. This fixes the float containment of any children floating within it. This CSS fix is more practical then including an additional element in the HTML styled with clear:both and works on all modern browsers, including IE7+.

---

Related Topics