Selon la conception produite, chacune des solutions CSS clearfix ci-dessous a ses propres avantages.
Le clearfix a des applications utiles mais il a également été utilisé comme hack. Avant d'utiliser un clearfix, ces solutions css modernes peuvent être utiles:
Solutions Clearfix modernes
Conteneur avec overflow: auto;
La façon la plus simple d'effacer les éléments flottants consiste à utiliser le style overflow: autode l'élément conteneur. Cette solution fonctionne dans tous les navigateurs modernes.
<div style="overflow: auto;">
<img
style="float: right;"
src="path/to/floated-element.png"
width="500"
height="500"
>
<p>Your content here…</p>
</div>
Un inconvénient, l'utilisation de certaines combinaisons de marge et de remplissage sur l'élément externe peut entraîner l'apparition de barres de défilement, mais cela peut être résolu en plaçant la marge et le remplissage sur un autre élément contenant un parent.
L'utilisation de 'overflow: hidden' est également une solution de correction claire, mais n'aura pas de barres de défilement, mais l'utilisation hiddenrecadrera tout contenu positionné en dehors de l'élément contenant.
Remarque: L'élément flottant est une imgbalise dans cet exemple, mais pourrait être n'importe quel élément html.
Clearfix Reloaded
Thierry Koblentz sur CSSMojo a écrit: Le tout dernier clearfix a été rechargé . Il a noté qu'en supprimant le support pour oldIE, la solution peut être simplifiée en une seule instruction css. De plus, l'utilisation display: block(au lieu de display: table) permet aux marges de se réduire correctement lorsque les éléments avec clearfix sont des frères et sœurs.
.container::after {
content: "";
display: block;
clear: both;
}
Il s'agit de la version la plus moderne du clearfix.
⋮
⋮
Anciennes solutions Clearfix
Les solutions ci-dessous ne sont pas nécessaires pour les navigateurs modernes, mais peuvent être utiles pour cibler des navigateurs plus anciens.
Notez que ces solutions dépendent des bogues du navigateur et ne doivent donc être utilisées que si aucune des solutions ci-dessus ne fonctionne pour vous.
Ils sont classés à peu près par ordre chronologique.
"Beat That ClearFix", un clearfix pour les navigateurs modernes
Thierry Koblentz » de Mojo CSS a souligné que lors du ciblage des navigateurs modernes, nous pouvons maintenant laisser tomber la zoomet ::beforepropriété / valeurs et utilisez simplement:
.container::after {
content: "";
display: table;
clear: both;
}
Cette solution ne prend pas en charge IE 6/7… exprès!
Thierry propose également: " Un mot d'avertissement : si vous démarrez un nouveau projet à partir de zéro, allez-y, mais n'échangez pas cette technique avec celle que vous avez maintenant, car même si vous ne supportez pas oldIE, vos règles existantes empêchent effondrement des marges. "
Micro Clearfix
La solution clearfix la plus récente et la plus adoptée au monde, le Micro Clearfix de Nicolas Gallagher .
Prise en charge connue: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+
.container::before, .container::after {
content: "";
display: table;
}
.container::after {
clear: both;
}
.container {
zoom: 1;
}
Propriété de débordement
Cette méthode de base est préférée pour le cas habituel, lorsque le contenu positionné ne s'affichera pas en dehors des limites du conteneur.
http://www.quirksmode.org/css/clearing.html
- explique comment résoudre les problèmes courants liés à cette technique, à savoir la configuration width: 100%du conteneur.
.container {
overflow: hidden;
display: inline-block;
display: block;
}
Plutôt que d'utiliser la displaypropriété pour définir "hasLayout" pour IE, d'autres propriétés peuvent être utilisées pour déclencher "hasLayout" pour un élément .
.container {
overflow: hidden;
zoom: 1;
display: block;
}
Une autre façon d'effacer les flottants à l'aide de la overflowpropriété est d'utiliser le hack de soulignement . IE appliquera les valeurs précédées du trait de soulignement, contrairement aux autres navigateurs. La zoompropriété déclenche hasLayout dans IE:
.container {
overflow: hidden;
_overflow: visible; /* for IE */
_zoom: 1; /* for IE */
}
Bien que cela fonctionne ... il n'est pas idéal d'utiliser des hacks.
TARTE: Méthode de compensation facile
Cette ancienne méthode "Easy Clearing" a l'avantage de permettre aux éléments positionnés de se suspendre en dehors des limites du conteneur, au détriment d'un CSS plus délicat.
Cette solution est assez ancienne, mais vous pouvez tout savoir sur la compensation facile sur Position Is Everything: http://www.positioniseverything.net/easyclearing.html
Élément utilisant la propriété "clear"
La solution rapide et sale (avec quelques inconvénients) lorsque vous giflez rapidement quelque chose ensemble:
<br style="clear: both" /> <!-- So dirty! -->
Désavantages
- Il n'est pas réactif et peut donc ne pas fournir l'effet souhaité si les styles de mise en page changent en fonction des requêtes des médias. Une solution en CSS pur est plus idéale.
- Il ajoute du balisage html sans nécessairement ajouter de valeur sémantique.
- Il nécessite une définition et une solution en ligne pour chaque instance plutôt qu'une référence de classe à une solution unique de «clearfix» dans le css et des références de classe dans le html.
- Cela rend le code difficile à utiliser pour les autres, car ils peuvent avoir à écrire plus de hacks pour le contourner.
- À l'avenir, lorsque vous aurez besoin / souhaitez utiliser une autre solution Clearfix, vous n'aurez pas à revenir en arrière et à supprimer toutes les
<br style="clear: both" />balises jonchant le balisage.
