Qu'est-ce qu'un clearfix?

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

Après une recherche rapide sur Google, j'ai appris qu'il est pour IE6 parfois, mais ce qui en fait est un clearfix?

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

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 dispositions flottantes.

Il convient de 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 - Meilleur
• Flexbox - Meilleur (mais prise en charge limitée 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: https://caniuse.com/flexbox .

(Peut-être qu'une fois que sa position est complètement établie, ce peut être la façon absolument recommandée de disposer 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'ajouter de balisage supplémentaire. Il est généralement utilisé dans les dispositions flottantes 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 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 du support IE <8, ce qui suit est très bien aussi:

.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 - par Chris Coyer @ CSS-Tricks

Les autres réponses sont correctes. Mais je veux ajouter que c'est une relique de l'époque où les gens apprenaient le CSS pour la première fois et abusaient floatde faire toute leur mise en page. floatest censé 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 il n'était pas vraiment destiné à cela, vous avez besoin de hacks comme "clearfix" pour le faire fonctionner.

Ces jours-ci display: inline-blocksont une alternative solide ( sauf pour IE6 et IE7 ), bien que les navigateurs plus modernes proposent des mécanismes de mise en page encore plus utiles sous des noms tels que flexbox, mise en page de grille, etc.

Le clearfixpermet à un conteneur d'envelopper ses enfants flottants. Sans clearfixstyle ou équivalent, un conteneur ne s'enroule pas autour de 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 principaux auteurs.

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 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 la prise en charge des anciens navigateurs, il existe une version plus courte:

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

Offrir une mise à jour sur la situation au T2 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é d'affichage définie sur flow-root) génère une zone de conteneur de bloc et présente 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 une div parent contenant un ou plusieurs enfants flottants, cette propriété va garantir que le parent entoure tous ses enfants. Sans aucun besoin d'un hack clearfix. Sur tous les enfants, ni même sur 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;
}

<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>

Autrement dit, clearfix est un hack .

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

Personnellement, je penche pour 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

Une technique couramment utilisée dans les mises en page flottantes CSS consiste à affecter 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 généralement implémentée à l'aide d'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 :afterl'élément actif contenant un seul '.' marqué comme caché, ce qui effacera tous les flotteurs préexistants et réinitialisera efficacement la page pour le prochain contenu.

L'autre option (et peut-être la plus simple) pour obtenir un clearfix est d'utiliser overflow:hidden;sur l'élément contenant. 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.

J'ai essayé la réponse acceptée mais j'ai toujours eu un problème avec l'alignement du contenu. L'ajout d'un sélecteur ": avant" 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 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;
}

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 d'informations sur ce 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}

En voici une version compacte ...

.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}