Selon la conception du produit, chacun des ci-dessous clearfix css solutions a ses propres avantages.
"Battre ClearFix", un clearfix pour les navigateurs modernes
Thierry Coblence " de CSS Mojo a souligné que lorsque le ciblage des navigateurs modernes, nous pouvons maintenant déposer l' zoom et ::before propriété/valeurs et utilisez simplement:
.container:after {
content:"";
display:table;
clear:both;
}
Cette solution ne prend pas en charge pour IE 6/7 ...sur le but!
Thierry propose également: "Un mot d'avertissement: si vous démarrez un nouveau projet à partir de zéro, allez-y, mais ne pas les swaps de cette technique avec celui que vous avez maintenant, parce que même si vous ne supportez pas oldIE, vos règles existantes de prévenir l'effondrement des marges."
Micro Clearfix
La plus récente et à l'échelle mondiale a adopté clearfix solution, le Micro Clearfix par Nicolas Gallagher.
.container:before,
.container:after {
content:"";
display:table;
}
.container:after {
clear:both;
}
.container {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
Propriété De Dépassement
Cette méthode de base est préféré pour le cas d'habitude, lors du positionnement, le contenu ne sera pas le montrer à l'extérieur des limites du conteneur.
http://www.quirksmode.org/css/clearing.html
- explique comment résoudre les problèmes courants liés à cette technique, à savoir le paramètre width: 100% sur le conteneur.
.container {
overflow: hidden;
display: inline-block; /* Necessary to trigger "hasLayout" in IE */
display: block; /* Sets element back to block */
}
Plutôt que d'utiliser l' display de propriété pour définir "hasLayout" pour IE, d'autres propriétés peuvent être utilisées pour trigering "hasLayout" pour un élément.
.container {
overflow: hidden; /* Clearfix! */
zoom: 1; /* Triggering "hasLayout" in IE */
display: block; /* Element must be a block to wrap around contents. Unnecessary if only using block-level elements. */
}
Une autre façon d'effacer les flotteurs à l'aide de l' overflow de la propriété est d'utiliser le trait de soulignement hack. IE appliquer les valeurs préfixées avec le trait de soulignement, les autres navigateurs ne le sera pas. L' zoom de la propriété des déclencheurs hasLayout dans IE:
.container {
overflow: hidden;
_overflow: visible; /* for IE */
_zoom: 1; /* for IE */
}
Bien que cela fonctionne... il est idéal de ne pas utiliser des hacks.
":après" Pseudo-élément
Cette ancienne "Facile de Compensation de la" méthode a l'avantage de permettre les éléments en position pour accrocher à l'extérieur des limites du conteneur, au détriment de la plus délicate CSS.
http://www.positioniseverything.net/easyclearing.html
.container {
display: inline-block;
}
.container:after {
content: " ";
display: block;
height: 0;
clear: both;
overflow: hidden;
visibility: hidden;
}
.container {
display: block;
}
Élément à l'aide de "clair" de la propriété
Le rapide et sale de la solution:
<br style="clear:both" /> <!-- So dirty! -->
À l'aide de l'élément de compensation de la solution n'est pas idéale pour de nombreuses raisons:
- la raison principale: vous mettez présentation dans votre balisage. Cela permet de réutiliser le balisage plus difficile si vous ne voulez pas l'
<br> style dans un autre contexte où le même langage est utilisé. CSS devrait être utilisé pour le style de la même balise différemment dans des contextes différents.
- ne pas ajouter de la sémantique de la valeur à votre balisage,
- rend votre code non professionnels, et
- dans l'avenir, lorsque d'autres clearfix solutions sont disponibles, vous n'aurez pas à revenir en arrière et supprimer toutes les
<br> balises qui sont éparpillées autour dans votre balisage.
Choisir à bon escient. =)
