.clearfix still needed?

Question

One last question. The code I inherited has the following:

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

Seems like a lot of hacks. Is this still needed for the modern browsers IE7 and upwards?

Duplicate: http://stackoverflow.com/questions/5565668/in-2011-is-there-any-need-for-clearfix — Jostein, Apr 18 '11 at 14:57

score 8 · Accepted Answer · edited May 23 '17 at 11:43

8

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?

edited May 23 '17 at 11:43

Community

1
1

answered Apr 18 '11 at 14:57

thirtydot

224,678
48
389
349

Where do I put the overflow: hidden? I am used to adding the class="clearfix" to many of my
Can I put this in a css for something like body { } ?
– JudyJ Apr 18 '11 at 15:04
I tend to just add `overflow: hidden` to each element that requires it. So if you had a div containing floats: `
`, in your CSS you would write `#container { overflow: hidden }`. **Do not** put `overflow: hidden` on `body`: this will prevent your page from being able to scroll.
– thirtydot Apr 18 '11 at 15:06
Thank you. I added it to the CSS definition of a div that had an ID. But I have more divs inside that div. Will it be inherited by divs within divs? – JudyJ Apr 18 '11 at 15:14
No, the [`overflow` property](https://developer.mozilla.org/en/CSS/overflow) is not *inheritable*. However, the clearfix class *also* isn't inheritable - as you said, you're used to adding the `clearfix` class to many `div`s. You only need to add float clearance to `div`s that contain elements that are `float`ed. You should not need to (float clear) add `overflow: hidden` to many elements. – thirtydot Apr 18 '11 at 15:18

score 0 · Answer 2 · answered Apr 18 '11 at 15:07

A pretty simple cross-browser method that has always worked for me is placing this below any floated content:

<div style="clear: both;">&nbsp;</div>

Or you can use class="clear" if you want to be neater.

Having the space there isn't always necessary but there are cases when it is.

score -1 · Answer 3 · answered Apr 18 '11 at 15:10

-1

I still use it simply because I'd rather have class="clear" vs overflow: auto or hidden on all my elements.

answered Apr 18 '11 at 15:10

stewart715

5,557
11
47
80

.clearfix still needed?

3 Answers3