Last Updated: February 25, 2016
·
1.577K
· maxime

CSS micro clearfix hack

Thanks to <a href="http://nicolasgallagher.com/micro-clearfix-hack/">Nicolas Gallagher</a> for this one.

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    *zoom:1;
}

Bonus, my LESS version:

.cf {
    *zoom:1;
    &:before, &:after {
        content:"";
        display:table;
    }
    &:after { clear:both; }
}

Warning: Not fully compatible with IE6/7, but who cares.