Qu’est-ce qu’un correctif?

Récemment, j’ai parcouru le code d’un site Web et j’ai vu que chaque

avait un clearfix classe.

Après une rapide recherche sur Google, j’ai appris que c’était pour IE6 parfois, mais qu’est-ce qu’un corrigé?

Pourriez-vous donner quelques exemples d’une mise en page avec un correctif, par rapport à une mise en page sans correctif?

Si vous n’avez pas besoin de prendre en charge IE9 ou une version inférieure, vous pouvez utiliser librement Flexbox, sans avoir besoin d’utiliser des mises en page flottantes.

Il est intéressant de noter qu’aujourd’hui, l’utilisation d’éléments flottants pour la mise en page est de plus en plus découragée avec l’utilisation de meilleures alternatives.

  • display: inline-block – Better
  • Flexbox – Best (mais support limité du navigateur)

Flexbox est pris en charge par Firefox 18, Chrome 21, Opera 12.10 et Internet Explorer 10, Safari 6.1 (y compris Mobile Safari) et le navigateur par défaut d’Android 4.4.

Pour une liste détaillée des navigateurs, voir: http://caniuse.com/flexbox .

(Peut-être une fois que sa position est établie complètement, ce peut être la manière absolument recommandée de présenter les éléments.)


Un clearfix est un moyen pour un élément d’ effacer automatiquement ses éléments enfants , de sorte que vous n’avez pas besoin d’append de balisage. Il est généralement utilisé dans les plans flottants où les éléments flottent pour être empilés horizontalement.

Le clearfix est un moyen de lutter contre le problème des conteneurs de hauteur zéro pour les éléments flottants.

Un correctif est effectué comme suit:

 .clearfix:after { content: " "; /* Older browser do not support empty content */ visibility: hidden; display: block; height: 0; clear: both; } 

Ou, si vous n’avez pas besoin du support d’IE <8, ce qui suit convient également:

 .clearfix:after { content: ""; display: table; clear: both; } 

Normalement, vous devez faire quelque chose comme suit:

 
Sidebar

Avec clearfix, vous n’avez besoin que des éléments suivants:

 
Sidebar

Lisez à ce sujet dans cet article – par Chris Coyer @ CSS-Tricks

Si vous apprenez en visualisant, cette image pourrait vous aider à comprendre ce que fait Clearfix .

entrer la description de l'image ici

Les autres réponses sont correctes. Mais je veux append que c’est un vestige de l’époque où les gens apprenaient en premier lieu le CSS, et abusaient du float pour faire toute leur mise en page. float est destiné à faire des choses comme des images flottantes à côté de longues séries de texte, mais beaucoup de personnes l’utilisaient comme principal mécanisme de mise en page. Comme ce n’était pas vraiment fait pour ça, vous avez besoin de hacks comme “clearfix” pour le faire fonctionner.

Ces jours display: inline-block est une alternative solide ( sauf pour IE6 et IE7 ), bien que des navigateurs plus modernes viennent avec des mécanismes de mise en page encore plus utiles sous des noms tels que flexbox, disposition de grid, etc.

Le clearfix permet à un conteneur d’envelopper ses enfants flottants. Sans un clearfix ou un style équivalent, un conteneur ne clearfix pas ses enfants flottants et s’effondre, comme si ses enfants flottants étaient positionnés de manière absolue.

Il existe plusieurs versions du clearfix, avec Nicolas Gallagher et Thierry Koblentz comme auteurs principaux.

Si vous souhaitez un support pour les anciens navigateurs, il est préférable d’utiliser ce correctif:

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

Dans SCSS, vous devez utiliser la technique suivante:

 %clearfix { &:before, &:after { content:" "; display:table; } &:after { clear:both; } & { *zoom:1; } } #clearfixedelement { @extend %clearfix; } 

Si vous ne vous souciez pas des anciens navigateurs, il existe une version plus courte:

 .clearfix:after { content:""; display:table; clear:both; } 

Offrir une mise à jour sur la situation au deuxième sortingmestre 2017.

Une nouvelle propriété d’affichage CSS3 est disponible dans Firefox 53, Chrome 58 et Opera 45.

 .clearfix { display: flow-root; } 

Vérifiez la disponibilité de tout navigateur ici: http://caniuse.com/#feat=flow-root

L’élément (avec une propriété d’affichage définie sur flow-root) génère une boîte de conteneur de blocs et expose son contenu à l’aide de la disposition de stream. Il établit toujours un nouveau contexte de mise en forme de bloc pour son contenu.

Cela signifie que si vous utilisez un div parent contenant un ou plusieurs enfants flottants, cette propriété va garantir que le parent englobe tous ses enfants. Sans avoir besoin d’un hack de clearfix. Sur tous les enfants, ni même un dernier élément factice (si vous utilisiez la variante clearfix avec: avant sur les derniers enfants).

 .container { display: flow-root; background-color: Gainsboro; } .item { border: 1px solid Black; float: left; } .item1 { height: 120px; width: 120px; } .item2 { height: 80px; width: 140px; float: right; } .item3 { height: 160px; width: 110px; } 
 
This container box encloses all of its floating children.
Floating box 1
Floating box 2
Floating box 3

En termes simples, clearfix est un hack .

C’est l’une des choses les plus horribles avec lesquelles nous devons tous vivre, car c’est vraiment la seule façon raisonnable de faire en sorte que les éléments enfantins flottants ne débordent pas de leurs parents. Il existe d’autres schémas d’implantation, mais le flottement est trop courant dans la conception et le développement Web pour ignorer la valeur du hack clearfix.

Je me penche personnellement vers la solution Micro Clearfix (Nicolas Gallagher)

 .container:before, .container:after { content:""; display:table; } .container:after { clear:both; } .container { zoom:1; /* For IE 6/7 (sortinggger hasLayout) */ } 

référence

Une technique couramment utilisée dans les mises en page CSS basées sur les flottants consiste à affecter une poignée de propriétés CSS à un élément qui, à votre connaissance, contiendra des éléments flottants. La technique, généralement implémentée en utilisant une définition de classe appelée clearfix , (généralement) implémente les comportements CSS suivants:

 .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; zoom: 1 } 

Le but de ces comportements combinés est de créer un conteneur :after l’élément actif contenant un seul. ‘ marqué comme caché qui effacera tous les flottants préexistants et réinitialisera efficacement la page pour le prochain élément de contenu.

L’autre (et peut-être la plus simple) option pour obtenir un correctif est d’utiliser le overflow:hidden; sur l’élément contenant. Par exemple

 .parent { background: red; overflow: hidden; } .segment-a { float: left; } .segment-b { float: right; } 
 
Float left
Float right

J’ai essayé la réponse acceptée mais j’avais toujours un problème avec l’alignement du contenu. L’ajout d’un sélecteur “: before” comme indiqué ci-dessous a résolu le problème:

 // LESS HELPER .clearfix() { &:after, &:before{ content: " "; /* Older browser do not support empty content */ visibility: hidden; display: block; height: 0; clear: both; } } 

MOINS ci-dessus comstackront en CSS ci-dessous:

 clearfix:after, clearfix:before { content: " "; /* Older browser do not support empty content */ visibility: hidden; display: block; height: 0; clear: both; } 

Voici une méthode différente même chose mais un peu différente

la différence est le sharepoint contenu qui est remplacé par un \00A0 == whitespace

Plus sur ceci http://www.jqui.net/tips-sortingcks/css-clearfix/

 .clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} .clearfix{ display: inline-block;} html[xmlns] .clearfix { display: block;} * html .clearfix{ height: 1%;} .clearfix {display: block} 

Voici une version compacte de celui-ci …

 .clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;width:0;font-size: 0px}.clearfix{ display: inline-block;}html[xmlns] .clearfix { display: block;}* html .clearfix{ height: 1%;}.clearfix {display: block} 

Clearfix est utilisé pour effacer les flotteurs supplémentaires. C’est une classe ajoutée dans l’élément parent.

Mon code clearfix est ici …

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

Bien qu’il soit copié mais aidera. Ici :before et :after est utilisé pour indiquer les points initiaux et finaux de cet élément. Alors que clear:both ne permettent pas d’autres éléments flottants sur les côtés droit ou gauche de cet élément spécifié contenant cette classe.