Propriété CSS clear

La propriété clear est directement liée à floats. La propriété clear définit q'un élément doit être à côté des éléments flottants ou au-dessous (clear).

On peut appliquer la propriété clear aux éléments flottants et non flottant à la fois. Cette propriété a quatre valeurs: none, left, right et both. "None" est la valeur initiale. Elle autorise des éléments flottants sur les deux côtés. La valeur "left" n'autorise aucun élément flottant au côté gauche. La valeur "right" n'autorise aucun élément flottant au côté droit. La valeur "both" n'autorise aucun élément flottant soit au côté gauche, soit au côté droit.

Valeur initiale none
Appliquée à Éléments du niveau bloc.
Héritée Non.
Animable Non.
Version CSS1
Syntaxe DOM object.style.clear = "both";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      img {
      float: left;
      background: #ccc
      }
      .clear { 
      clear: right;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png">
    <p class="clear">Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, quand un imprimeur inconnu a pris une galère de type et l'a brouillé pour en faire un cahier de caractères. Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique.</p>
  </body>
</html>

Voyons un autre exemple avec la valeur "left".

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      img {
      float: right;
      background: #ccc
      }
      .clear { 
      clear: left;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png">
    <p class="clear">Lorem Ipsum est simplement un texte factice de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, quand un imprimeur inconnu a pris une galère de type et l'a brouillé pour en faire un cahier de caractères. Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique.</p>
  </body>
</html>

Voici un exemple avec la valeur "both".

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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 est simplement un texte factice de l'industrie de l'impression et de la composition. Lorem Ipsum est le texte factice standard de l'industrie depuis les années 1500, quand un imprimeur inconnu a pris une galère de type et l'a brouillé pour en faire un cahier de caractères. Il a survécu non seulement à cinq siècles, mais aussi au saut dans la composition électronique.</p>
  </body>
</html>

Valeurs

Valeur Description
none Autorise des éléments flottants sur les deux côtés. C'est la valeur initiale de cette propriété.
left Cela signifie que des éléments flottants ne sont pas autorisés au côté gauche.
right Cela signifie que des éléments flottants ne sont pas autorisés au côté droit.
both Cela signifie que des éléments flottants ne sont pas autorisés au côté droit et gauche.
initial Définit la valeur initiale.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

Pratiquez vos connaissances

Qu'est-ce que la propriété CSS 'clear' permet de faire?
Trouvez-vous cela utile?