Cela vous fera très bien ces jours-ci (IE 8 et plus):
.group:after ( content: ""; display: table; clear: both; )Appliquez-le à tout élément parent dans lequel vous devez effacer les flottants. Par exemple:
Vous utiliseriez ceci au lieu d'effacer le flottant avec quelque chose comme overflow: hidden;sur le parent (vous ne voulez pas toujours cacher le débordement ).
Maintenant, un peu d'histoire!
Il s'agissait de la version originale populaire, conçue pour prendre en charge les navigateurs aussi loin que possible:
.clearfix:after ( visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; ) .clearfix ( display: inline-block; ) /* start commented backslash hack \*/ * html .clearfix ( height: 1%; ) .clearfix ( display: block; ) /* close commented backslash hack */Il y avait alors une version plus propre documentée ici par Jeff Starr, basée sur le fait que personne n'utilise IE pour Mac, ce qui était le but du hack anti-slash.
.clearfix:after ( visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; ) * html .clearfix ( zoom: 1; ) /* IE6 */ *:first-child+html .clearfix ( zoom: 1; ) /* IE7 */Ensuite, il est devenu populaire d'utiliser «groupe» comme nom de classe, qui est plus agréable et plus sémantique (via Dan Cederholm). De plus, la contentpropriété n'a même pas besoin d'espace, elle peut être une chaîne vide (via Nicolas Gallagher). Ensuite, sans aucun texte, font-sizec'est inutile (Chris Coyier).
.group:after ( visibility: hidden; display: block; content: ""; clear: both; height: 0; ) * html .group ( zoom: 1; ) /* IE6 */ *:first-child+html .group ( zoom: 1; ) /* IE7 */Bien sûr, si vous supprimez le support IE 6 ou 7, supprimez les lignes associées.
Mise à jour du 18 mai 2011: Nicolas Gallagher à nouveau avec le clearfix «micro». Voir également ces informations supplémentaires..group:before, .group:after ( content: ""; display: table; ) .group:after ( clear: both; ) .group ( zoom: 1; /* For IE 6/7 (trigger hasLayout) */ )Voir le haut de cette page pour la version la plus moderne du clearfix.
À l'avenir, nous pourrons peut-être faire:
.group ( display: flow-root; )