Comment effacer au mieux les flotteurs CSS en 2014 et au-delà ?

Effacer les flotteurs CSS : meilleures pratiques

La question de la suppression efficace des flotteurs CSS a évolué au fil du temps, avec l'émergence de diverses techniques. Bien que l'utilisation de
soit une pratique courante, elle peut ne pas correspondre aux meilleures pratiques actuelles.

Approche moderne :

En 2014, une technique clearfix utilisant des pseudo-éléments sont recommandés. Cette méthode consiste à appliquer le CSS suivant :

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

Cette technique fonctionne dans les navigateurs modernes. Pour une optimisation plus poussée, le micro clearfix tel que conçu par Nicholas Gallagher peut être utilisé :

.cf {
    *zoom: 1;
}

Solution originale :

Une solution alternative privilégiée par ceux qui préfèrent éviter les inutiles le balisage consiste à utiliser overflow: Hidden ou overflow: auto sur l'élément parent. Cela efface efficacement les flotteurs entre navigateurs sans nécessiter d'éléments supplémentaires.

Résumé :

En 2014, la technique clearfix avec pseudo-éléments représente la méthode recommandée pour effacer les flotteurs. de manière indépendante du navigateur. Cependant, la méthode de débordement reste une option viable pour ceux qui privilégient la minimisation du balisage.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!