Partager un plan d'optimisation pour effacer les flotteurs

clearfix hack est bien connu comme méthode pour effacer le flottant sans utiliser de balises supplémentaires Cet article donne une solution d'optimisation qui peut réduire davantage le nombre de CSS requis.

Demo: Micro clearfix hack
Known support: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

micro clearfix est optimisé sur la base du "clearfix reloaded" de Thierry Koblentz et convient aux navigateurs modernes (navigateurs modernes)

Ce qui suit est l'extrait de code de micro clearfix

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

"micro clearfix" génère un élément pseudo-classe et définit son affichage attribut sur table, créant ainsi une cellule de tableau anonyme et générant un nouveau BFC, comme ça Cela signifie que la pseudo-classe
:before empêchera la marge supérieure de se replier, et la pseudo-classe :after est utilisée pour effacer le flottant. L'avantage est qu'il n'est pas nécessaire de masquer le contenu généré, et moins de code CSS est requis pour

Il n'est pas nécessaire d'effacer les flottants, y compris le sélecteur :before, mais l'ajout de :before peut empêcher les marges supérieures de se replier. Cela présente deux avantages :

• C'est la même chose que les autres méthodes d'effacement des flotteurs à l'aide de BFC , garantissant une cohérence visuelle, comme l'utilisation de overflow:hidden

• Lors de l'utilisation de zoom:1 in. IE 6/7, assurer la cohérence visuelle
  N.B. : Il y a un détail : Dans IE 6/7, la marge inférieure des éléments flottants dans le nouveau BFC ne sera pas incluse. Pour plus de description, veuillez voir ici : Meilleur confinement des flotteurs. dans IE en utilisant des expressions CSS.
  content:" "Éviter l'utilisation de Correction d'un bug dans Opera Si l'attribut contenteditable apparaît dans un élément en même temps, ce bug générera des espaces autour de l'élément à effacer. Le correctif consiste à utiliser font:0/0 a. Merci à Sergio Cerrutti d'avoir testé ce bug

[Recommandations associées]

1. tutoriel vidéo en ligne CSS

2.

manuel en ligne CSS

3

php.cn Dugu Jiujian (2) - tutoriel vidéo CSS

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!