Effacer les nouveaux mots flottants

origine :

.clearfix : après {
visibilité : cachée ;
affichage : bloc ;
taille de police : 0 ;
contenu: " ";
clair : les deux ;
hauteur : 0 ;
}
.clearfix { affichage : table en ligne ;
/* Se cache depuis IE-mac */
* html .clearfix { hauteur : 1% }
.clearfix { affichage : bloc }
/* Fin du masquage depuis IE-mac */

illustrer :

• *Applique le premier bloc de déclaration à la plupart des navigateurs conformes aux normes, dans le but de créer un bloc de contenu vide invisible qui efface les flottants pour l'élément cible.
• *Le deuxième élément applique l'attribut d'affichage de table en ligne pour clearfix, uniquement pour IE/Mac.
• *Exploiter* / Masquer certaines règles depuis IE/Mac :
• * height:1% est utilisé pour déclencher haslayout sous IE6.
• *Réappliquez l'attribut d'affichage du bloc à IE autre que IE/Mac.
• *La dernière ligne est utilisée pour terminer le hack pour IE/Mac.

Les navigateurs visés par cette méthode étant devenus historiques (notamment IE5 sous Mac), ou en passe de devenir des standards, cette méthode n'est plus aussi d'actualité.

Après avoir abandonné le support pour IE/Mac, nouvelle méthode d'effacement des flottants :

/* nouveau correctif */
.clearfix : après {
visibilité : cachée ;
affichage : bloc ;
taille de police : 0 ;
contenu: " ";
clair : les deux ;
hauteur : 0 ;
}
* html .clearfix { zoom : 1 } /* IE6 */
*:premier-enfant+html .clearfix { zoom: 1 } /* IE7 */

illustrer :

Ni IE6 ni IE7 ne prennent en charge la pseudo-classe :after, les deux suivantes sont donc nécessaires pour déclencher le haslayout d'IE6/7 afin d'effacer les flottants. Heureusement, IE8 prend en charge la pseudo-classe :after. Ainsi, seuls les hacks pour IE6/7 sont nécessaires.