hx2sfw
Last Updated: February 25, 2016
·
1.174K
· _faz
Fabien zibi

Clearfix Me !

When you put floats in a div, you certainly noticed that the div doesn't really contain the floats.

First reflexe was to setting a display:table on the container, but, we don't want to alter it.

So, you can use pseudo elements :

.container:before, .container:after {
  zoom: 1
  content: "";
  display: table;
}

.container:after {
  clear: both;
}
Say Thanks
Respond

6 Responses
Add your response

5831
190043 533696520020804 1840519452 n

Hmm, this one is better, I think :)

.cf:after {
    content: '';
    clear: both;
    display: table;
}
over 1 year ago ·
5836

I use this one:

.cleafix:after {
    display: block;
    content: '';
    clear: both;
    zoom: 1;
}

Some people add:

height: 0;
over 1 year ago ·
5872
Alex

Why the zoom: 1? It makes no sense for me.

I use this one:

.clfx:after {
  clear: both;
  content: " ";
  display: block;
  height: 0;
}
over 1 year ago ·
5874
Fabien zibi

You're right. Reading my post now, I don't understand the zoom: 1;

Your .clfx:after seems perfect

over 1 year ago ·
5911
B8a77b0bcbaf3cbd2c04a4af940f0791

i use this one for better x-browser compatibility:

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
over 1 year ago ·
5917
B8a77b0bcbaf3cbd2c04a4af940f0791

@_faz

Some people use zoom: 1; or height: 1% to trigger hasLayout in IE. But as far as i know it's only needed for inline-block elements

You can read more about hasLayout here:
http://www.satzansatz.de/cssd/onhavinglayout.html

over 1 year ago ·