origine :
.ClearFix: après {
Visibilité: cachée;
Affichage: bloc;
taille de police: 0;
contenu: " ";
Clear: les deux;
hauteur: 0;
}
.clearfix {Affichage: Tableau en ligne;}
/ * Se cache de ie-mac * /
* html .clEARFIX {hauteur: 1%;
.clearfix {Affichage: Block;}
/ * Fini masque à ie-mac * /
illustrer :
* Appliquez le premier bloc de déclaration à la plupart des navigateurs conformes standard, dans le but de créer un bloc nul invisible pour effacer les flottants pour l'élément cible.
* Le deuxième élément applique l'attribut d'affichage en ligne en ligne pour ClearFix, uniquement pour IE / Mac.
* Utiliser * / Masquer certaines règles à IE / Mac:
* Hauteur: 1% est utilisé pour déclencher Haslayout sous IE6.
* Réappliquez les propriétés d'affichage du blocage à IE à l'extérieur IE / Mac.
* La dernière ligne est utilisée pour terminer le piratage pour IE / Mac.
Étant donné que cette méthode est ciblée sur les navigateurs qui sont devenus l'histoire (en particulier IE5 sur Mac), ou sont sur la voie des normes, cette méthode n'est plus aussi progressive que les temps.
Après avoir jeté le support pour IE / Mac, une nouvelle méthode de compensation flottante:
/ * nouveau clearfix * /
.ClearFix: après {
Visibilité: cachée;
Affichage: bloc;
taille de police: 0;
contenu: " ";
Clear: les deux;
hauteur: 0;
}
* html .clearfix {zoom: 1;} / * ie6 * /
*: premier-enfant + html .clearfix {zoom: 1;} / * ie7 * /
illustrer :
IE6 et IE7 ne supportent aucun: après la pseudo-classe, donc les deux suivants sont nécessaires pour déclencher le Haslayout de IE6 / 7 pour effacer le flotteur. Heureusement, IE8 prend en charge: après des pseudo-classes. Par conséquent, seul le hack pour IE6 / 7 est nécessaire.