Qu'est-ce qu'un clearfix?


1004

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?


65
Ce n'est pas pour IE 6. Un clearfix garantit qu'un a divse développera complètement à la bonne hauteur pour enfermer ses enfants flottants. webtoolkit.info/css-clearfix.html
Sparky

Réponses:


983

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


1
de toute façon pour une raison quelconque, un espace blanc est une meilleure pratique qu'un point, j'ai eu des problèmes avec le point sur certains navigateurs, d'où la raison pour laquelle je l'ai mentionné :) une petite amélioration ne fera pas de mal :)
Val

1
content: "\00A0";les \ 00A0 représentent un espace blanc, un simple espace blanc ne fonctionne pas bien :) désolé. :)
Val

14
@MadaraUchiha, pourquoi display: inline-block est-il meilleur que les éléments flottants? Le seul problème que j'ai est que l'affichage avec un bloc en ligne cause des problèmes avec un espace entre les balises, qui n'est pas toujours facilement contrôlable.
mowwwalker

2
@Kzqai: C'est pourquoi Flexbox est l'option préférée quand elle devient plus largement prise en charge.
Madara's Ghost

11
Pas d'accord, c'est display: inline-blockmieux que les flottants pour une disposition basée sur des blocs. Les blocs en ligne sont, comme leur nom l'indique, disposés en ligne - la plupart des dispositions sont basées sur des blocs et le fait de disposer ces blocs dans un contexte de formatage en ligne n'a tout simplement aucun sens. Vous devez également faire face à divers problèmes associés à la mise en forme en ligne, tels que les espaces blancs inter-éléments, d'autres éléments en ligne, le dimensionnement, l'alignement, etc., comme beaucoup d'autres l'ont souligné. Certes, les dispositions flottantes n'ont pas beaucoup de sens non plus, mais au moins les flotteurs ont l'avantage d'être basés sur des blocs.
BoltClock

70

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.


1
Ma pratique en est venue à ce qu'il n'y a jamais aucune raison d'utiliser float. Chaque fois que vous l'utilisez, la moitié des choses se brisent. Je ne l'utiliserais que lorsque j'aurais besoin de choses pour évoquer à l'intérieur d'un div. Le bloc en ligne est génial. Le nouveau modèle de boîte est génial. Donc plus de hacks pour aller à l'alignement vertical.
Muhammad Umer

50
inline-blockn'est pas une amélioration stricte par rapport aux flottants en raison du problème d'espacement entre blocs , où les espaces dans le code HTML se traduisent par des caractères d'espacement qui séparent les blocs. inline-blocknécessite ses propres solutions de contournement , tout comme floatnécessite clearfix.
Rory O'Kane

41

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

1
Belle réponse John! Ce que je me demande, c'est pourquoi le transparent fait-il divenrouler les éléments flottants? Pouvez-vous m'aider à le visualiser?
Alexander Suraphel

@AlexanderSuraphel: Cette réponse l'explique en détail -> stackoverflow.com/questions/12871710/…
John Slegers

16

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>


1
Pouvez-vous décrire ce que cela fait par rapport à la question?
1,21 gigawatts du

Les modifications apportées par Clearfix aux enfants flottants n'influençant pas le flux parent en utilisant des hacks intelligents, flow-rootest la vraie solution.
mystrdat

11

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


5

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.


2

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.


1

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

0

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}

Vous vous substituez ici dans au moins 3 cas. .clearfix {...}, html[xmlns] .clearfix {...}, * html .clearfix {...}Et .clearfix {...}tout sélectionner la même chose et écraser les uns des autres. C'est un peu hacky et pas vraiment nécessaire.
ORyan

Il s'agit de l'ancienne version de la méthode CSS clearfix, tirée de css-tricks.com/snippets/css/clear-fix que j'ai ensuite découvert, que le "." [Point] était trop ennuyeux et l'a remplacé par un espace blanc , donc pourquoi \00A0, je pense que c'était à cause de la compatibilité croisée des navigateurs et de la connaissance de l'époque.
Val
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.