CSS : Hack micro clearfix

Le 16 août 2012 — par

Le hack CSS clearfix est connu pour contenir des éléments flottants facilement. Merci à Nicolas Gallagher pour ce hack micro clearfix qui utilise déjà moins de lignes CSS :

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

.cf:after {
    clear:both;
}

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

En bonus, ma version LESS :

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

Attention : Pas totalement compatible avec IE6/7 (à moins d’utiliser Selectivizr), mais bon, on s’en fout.

S'abonner au flux RSS du blog
Recevoir les nouveaux articles par e-mail :