La propriété CSS clear

La propriété clear est directement liée aux flottants. Elle contrôle si un élément est autorisé à se placer à côté d'un élément flottant précédent, ou s'il doit être repoussé (dégagé) en dessous.

Lorsqu'un élément est flottant, le contenu qui le suit s'enroule autour du flottant. clear permet d'interrompre cet enroulement : un élément dégagé descend sous le bord inférieur des flottants du côté spécifié au lieu de s'écouler à côté d'eux.

Cette page explique ce que fait chaque valeur de clear, la raison la plus courante d'utiliser clear (le motif "clearfix" pour contenir les flottants), et les pièges à surveiller.

Comment fonctionne clear

clear accepte les valeurs none, left, right, both, initial et inherit :

none — valeur par défaut. L'élément peut se placer à côté des flottants des deux côtés.
left — l'élément est déplacé sous tous les flottants à gauche qui le précèdent.
right — l'élément est déplacé sous tous les flottants à droite qui le précèdent.
both — l'élément est déplacé sous tous les flottants des deux côtés. C'est la valeur que vous voudrez utiliser la plupart du temps.

Remarque : clear ne réagit qu'aux flottants qui apparaissent plus tôt dans la source et n'affecte que les éléments dans le flux de bloc normal. Il n'a aucun effet à l'intérieur des mises en page Flexbox ou Grid, où float lui-même est ignoré.

Quand utiliser clear ?

L'utilisation la plus courante de clear est de contenir les flottants. Un parent qui ne contient que des enfants flottants s'effondre à une hauteur nulle, car les flottants sont retirés du flux normal. Le correctif classique — le "clearfix" — ajoute un pseudo-élément dégagé après les flottants pour que le parent s'étire et les englobe :

/* Clearfix: makes a container wrap its floated children */
.container::after {
  content: "";
  display: block;
  clear: both;
}

L'autre utilisation courante consiste à forcer un pied de page, un titre ou un séparateur de section à commencer en dessous d'une image ou d'une barre latérale flottante plutôt que de s'enrouler à côté — c'est exactement ce que montrent les exemples ci-dessous.

Valeur initiale	none
S'applique à	Les éléments de niveau bloc.
Hérité	Non.
Animable	Non.
Version	CSS1
Syntaxe DOM	element.style.clear = "both";

Syntaxe

Syntaxe de la propriété CSS clear

clear: none | left | right | both | initial | inherit;

Exemple de la propriété clear :

Exemple de la propriété CSS clear avec la valeur left

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        float: left;
        background: #ccc
      }
      .clear {
        clear: left;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" />
    <p class="clear">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  </body>
</html>

Essayez vous-même »

Résultat

Exemple de la propriété clear avec la valeur "right" :

Exemple de la propriété CSS clear avec la valeur right

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        float: right;
        background: #ccc
      }
      .clear {
        clear: right;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" />
    <p class="clear">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </p>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété clear avec la valeur "both" :

Exemple de la propriété CSS clear avec la valeur both

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        float: right;
        background: #CCC;
      }
      p.clear {
        clear: both;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" width="220" height="80" />
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </p>
    <p class="clear">
      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </p>
  </body>
</html>

Essayez vous-même »

Exemple du motif clearfix

Voici clear dans son utilisation la plus utile : sans la règle clearfix, la boîte avec bordure s'effondrerait à une hauteur nulle car son seul enfant est flottant. Le pseudo-élément ::after avec clear: both force la boîte à envelopper le flottant.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        border: 3px solid #1c87c9;
      }
      .box img {
        float: left;
        background: #ccc;
      }
      /* Remove this rule and the border collapses around nothing */
      .box::after {
        content: "";
        display: block;
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" width="220" height="80" alt="Floated image" />
    </div>
  </body>
</html>

Erreurs courantes

clear ne voit que les flottants antérieurs. Il repousse un élément sous les flottants qui apparaissent avant lui dans la source, pas après. Organisez votre balisage en conséquence.
Dégager l'élément flottant lui-même aide rarement. Pour contenir des flottants, dégagez un frère placé après eux (le ::after du clearfix), pas les flottants eux-mêmes.
Cela ne fait rien dans Flexbox ou Grid. Dans un conteneur flex ou grid, float est ignoré, donc clear n'a rien sur quoi agir. Préférez Flexbox ou Grid aux mises en page à base de flottants pour tout nouveau code.

Valeurs

Valeur	Description
none	Autorise les éléments flottants des deux côtés. C'est la valeur par défaut de cette propriété.
left	Signifie que les éléments flottants ne sont pas autorisés sur le côté gauche.
right	Signifie que les éléments flottants ne sont pas autorisés sur le côté droit.
both	Signifie que les éléments flottants ne sont autorisés d'aucun côté.
initial	Attribue à la propriété sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Entraînement

Pratique

Que fait la propriété 'clear' en CSS ?

Elle est utilisée pour spécifier quels éléments peuvent flotter à côté de l'élément dégagé et de quel côtéElle spécifie l'alignement d'un élémentElle est utilisée pour contrôler la façon dont la boîte d'un élément est disposéeElle empêche les éléments flottants d'apparaître à gauche, à droite, des deux côtés ou d'aucun côté d'un élémentElle permet au texte de s'enrouler autour des images dans un document