web-dev-qa-db-fra.com

Qu'est-ce qu'un clearfix?

Récemment, j'ai parcouru le code de certains sites Web et constaté que chaque <div> avait une classe clearfix.

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

Pourriez-vous donner quelques exemples de mise en page avec clearfix, comparée à une mise en page sans clearfix?

htmlcsslayoutcross-browserclearfix
956
H Bellamy

Si vous n'avez pas besoin de supporter IE9 ou une version antérieure inférieure, vous pouvez utiliser librement flexbox, et vous n'avez pas besoin d'utiliser des mises en page flottantes.

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

  • display: inline-block - Mieux
  • Flexbox - Meilleure (prise en charge limitée du navigateur)

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

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

(Peut-être une fois que sa position sera complètement établie, ce sera peut-être la méthode de présentation des éléments absolument recommandée.)

Clearfix Image

Un correctif est un moyen pour un élément de effacer automatiquement ses éléments enfants , de sorte que vous n'avez pas besoin d'ajouter de balisage supplémentaire. Il est généralement utilisé dans les dispositions flottantes où les éléments sont flottés pour être empilés horizontalement.

Le correctif est un moyen de lutter contre le problème de conteneur de hauteur nulle pour les éléments flottants

Un clearfix 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 de la prise en charge d'IE <8, ce qui suit convient également:

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

Normalement, vous devez faire quelque chose comme suit:

<div>
    <div style="float: left;">Sidebar</div>
    <div style="clear: both;"></div> <!-- Clear the float -->
</div>

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

<div class="clearfix">
    <div style="float: left;" class="clearfix">Sidebar</div>
    <!-- No Clearing div! -->
</div>

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

927
Madara Uchiha

Si vous apprenez en visualisant, cette image peut vous aider à comprendre ce que fait clearfix.

enter image description here

445
kyo

Les autres réponses sont correctes. Mais je veux ajouter que c’est un vestige de l’époque où les gens apprenaient pour la première fois le CSS et abusaient de float pour faire toute leur mise en page. float est conçu pour faire des choses comme des images flottantes à côté de longs textes, mais beaucoup de gens l'utilisaient comme mécanisme de présentation principal. Comme ce n’était pas vraiment destiné à cela, vous avez besoin d’instruments tels que "clearfix" pour que cela fonctionne.

De nos 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 présentation encore plus utiles sous des noms tels que flexbox, disposition en grille, etc.

63
Domenic

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

Il existe plusieurs versions du correctif, avec Nicolas Gallagher et Thierry Koblentz en tant qu'auteurs principaux.

Si vous souhaitez prendre en charge les navigateurs plus anciens, utilisez de préférence ce correctif:

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

Dans SCSS, vous pouvez utiliser la technique suivante:

%clearfix {
    &:before, &:after {
        content:" ";
        display:table;
    }

    &:after {
        clear:both;
    }

    & {
        *zoom:1;
    }
}

#clearfixedelement {
    @extend %clearfix;
}

Si vous ne vous souciez pas de supporter les anciens navigateurs, il existe une version plus courte:

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

Offrir une mise à jour sur la situation au deuxième trimestre de 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 n'importe quel navigateur ici: http://caniuse.com/#feat=flow-root

L'élément (avec une propriété display définie sur flow-root) génère une boîte de conteneur de blocs et en affiche le contenu à l'aide de la disposition du flux. Il établit toujours un nouveau contexte de formatage de bloc pour son contenu.

Ce qui signifie que si vous utilisez un div parent contenant un ou plusieurs enfants flottants, cette propriété garantira que le parent englobe tous ses enfants. Sans aucun 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: before 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;
}
<div class="container">
  This container box encloses all of its floating children.
  <div class="item item1">Floating box 1</div>
  <div class="item item2">Floating box 2</div> 
  <div class="item item3">Floating box 3</div>  
</div>
13
Kir Kanos

En termes simples, clearfix est un hack .

C’est l’une de ces choses laides avec laquelle nous vivons tous, c’est le seul moyen raisonnable de veiller à ce que les éléments enfants flottants ne débordent pas leurs parents. Il existe d'autres schémas de disposition mais la flottation est trop courante en conception/développement Web pour ignorer la valeur du hack de clearfix.

Personnellement, je me penche 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 (trigger hasLayout) */
}

référence

11
JRulle

Une technique couramment utilisée dans les mises en forme CSS à base flottante consiste à attribuer une poignée de propriétés CSS à un élément qui contiendra des éléments flottants. La technique, qui est généralement implémentée à l'aide d'une définition de classe appelée clearfix, implémente (généralement) 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 masqué, ce qui effacera tous les éléments existants et réinitialisera efficacement la page pour le contenu suivant.

5
Nathan Taylor

L'autre option (et peut-être la plus simple) pour obtenir un correctif consiste à utiliser overflow:hidden; sur l'élément conteneur. Par exemple

.parent {
  background: red;
  overflow: hidden;
}
.segment-a {
  float: left;
}
.segment-b {
  float: right;
}
<div class="parent">
  <div class="segment-a">
    Float left
  </div>
  <div class="segment-b">
    Float right
  </div>
</div>

Bien sûr, cela ne peut être utilisé que dans les cas où vous ne souhaitez jamais que le contenu déborde.

2
Dan W

J'ai essayé la réponse acceptée, mais j'avais toujours un problème d'alignement du contenu. L'ajout d'un sélecteur ": before" comme indiqué ci-dessous a corrigé 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 sera compilé en CSS ci-dessous:

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

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

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

Plus sur ceci http://www.jqui.net/tips-tricks/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}
0
Val