Propriété CSS clear

❮ Précédent Suivant ❯

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>

Essayez-vous-même!

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>

Essayez-vous-même!

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>

Essayez-vous-même!

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.