Question Qu'est-ce qu'un clearfix?


Récemment, je regardais le code d'un site Web et j'ai vu que <div>  eu une classe clearfix.

Après une rapide recherche sur Google, j'ai appris que c'est pour IE6 parfois, mais que réellement est un clearfix?

Pourriez-vous fournir quelques exemples d'une mise en page avec un clearfix, par rapport à une mise en page sans clearfix?


867
2017-12-18 19:02


origine


Réponses:


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

Il vaut la peine 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 - Meilleur
  • Flexbox - Meilleur (mais le navigateur est limité)

Flexbox est pris en charge à partir de 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 complètement établie, il peut être la manière absolument recommandée de disposer des éléments.)


Un clearfix est un moyen pour un élément de efface automatiquement ses éléments enfants, de sorte que vous n'avez pas besoin d'ajouter un balisage supplémentaire. Il est généralement utilisé dans float mises en page où les éléments sont flottants pour être empilés horizontalement.

Le clearfix est un moyen de combattre le problème de conteneur de hauteur zéro 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 d'IE <8 support, ce qui suit est bien aussi:

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

Normalement, vous devrez 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 - par Chris Coyer @ CSS-Tricks


847
2017-12-18 19:04



Si vous apprenez en visualisant, cette image pourrait vous aider à comprendre clearfix Est-ce que.

enter image description here


413
2018-04-10 13:12



Les autres réponses sont correctes. Mais je tiens à ajouter que c'est une relique de l'époque où les gens apprenaient d'abord CSS, et abusé float 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 gens l'ont utilisé comme mécanisme de mise en page principal. Comme ce n'était pas vraiment fait pour ça, vous avez besoin de hacks comme "clearfix" pour le faire fonctionner.

Ces jours-ci display: inline-block est une alternative solide (sauf 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 grille, etc.


58
2017-12-18 19:08



le clearfix permet à un conteneur d'envelopper ses enfants flottants. Sans un clearfix ou un style équivalent, un contenant ne s'enroule pas autour de ses enfants flottants et s'effondre, comme si ses enfants flottaient étaient positionnés absolument.

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

Si vous souhaitez prendre en charge 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 tenez pas compte des anciens navigateurs, il existe une version plus courte:

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

31
2018-04-18 09:35



Pour offrir une mise à jour sur la situation au T2 de 2017.

Une nouvelle propriété d'affichage CSS3 est disponible dans Firefox 53, Chrome 58 et Opéra 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é d'affichage définie sur flow-root) génère une boîte de conteneur de blocs et définit son contenu à l'aide de la disposition de flux. Il établit toujours un nouveau contexte de formatage de bloc pour son contenu.

Cela signifie que si vous utilisez un div parent contenant un ou plusieurs enfants flottants, cette propriété va s'assurer que le parent renferme tous ses enfants. Sans avoir besoin d'un hack clearfix. Sur tous les enfants, ni même un dernier élément fictif (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;
}
<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>


12
2018-04-20 21:02



Tout simplement, clearfix est un hack.

C'est une de ces choses laides que nous devons tous vivre, car c'est vraiment la seule façon raisonnable de s'assurer que les éléments flottants ne débordent pas leurs parents. Il existe d'autres schémas de mise en page, mais le flottement est trop courant aujourd'hui dans la conception / développement Web pour ignorer la valeur du hack clearfix.

Personnellement, je me tourne 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


10
2017-12-17 02:27



Une technique couramment utilisée dans les mises en page flottantes CSS consiste à attribuer une poignée de propriétés CSS à un élément dont vous savez qu'il contiendra des éléments flottants. La technique, qui est couramment implémentée en utilisant une définition de classe appelée clearfix, (habituellement) 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 masqué qui effacera tous les flottants préexistants et réinitialisera effectivement la page pour le contenu suivant.


4
2017-12-18 19:09