clear

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

La propriété clear indique si un élément peut être situé à côté d'éléments flottants qui le précèdent ou s'il doit être déplacé vers le bas pour être en dessous de ces éléments. La propriété clear s'applique aux éléments flottants comme aux éléments non-flottants.

Exemple interactif

Lorsqu'elle est appliquée aux blocs non-flottants, elle déplace le bord de la bordure de l'élément sous le bord de la marge de tous les éléments flottants concernés. Il y aura fusion des marges (margin collapsing) verticales entre l'élément flottant et le bloc non-flottant mais pas entre les élément flottants.

Lorsqu'elle est appliquée aux éléments flottants, elle déplace le bord de la marge de l'élément sous le bord de la marge de tous les éléments flottants concernés. Cela impacte la position des éléments flottants suivants car ceux-ci ne peuvent pas être situés plus haut que les éléments flottants qui les précèdent.

Les éléments flottants qui sont dégagés sont les éléments flottants précédant l'élément ciblé, au sein de du même contexte de formatage.

Note : Si un élément ne contient que des éléments flottants, sa hauteur sera nulle. Si on souhaite redimensionner l'élément afin qu'il contienne tous les éléments flottants à l'intérieur, on peut faire flotter ce conteneur ou utiliser clear sur un pseudo-élément remplacé ::after.

css
#conteneur::after {
  content: "";
  display: block;
  clear: both;
}

Syntaxe

css
/* Valeurs avec mot-clé */
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;

/* Valeurs globales */
clear: inherit;
clear: initial;
clear: unset;

Valeurs

none

Un mot-clé qui indique que l'élément n'est pas déplacé vers le bas pour dégager le flottement.

left

Un mot-clé qui indique que l'élément est déplacé vers le bas afin de dégager les flottements à gauche.

Un mot-clé qui indique que l'élément est déplacé vers le bas afin de dégager les flottements à droite.

both

Un mot-clé qui indique que l'élément est déplacé vers le bas afin de dégager les flottements à gauche et à droite.

inline-start

Un mot-clé qui indique que l'élément est déplacé vers le bas pour dégager le contenu vers le début du bloc englobant. Autrement dit, cela dégage à gauche pour les scripts de gauche à droite (LTR pour left to right) et dégage à droite pour les scripts de droite à gauche (RTL pour droite à gauche).

inline-end

Un mot-clé qui indique que l'élément est déplacé vers le bas pour dégager le contenu du côté de la fin du bloc englobant. Autrement dit, cela dégage à droite pour les scripts de gauche à droite (LTR pour left to right) et dégage à gauche pour les scripts de droite à gauche (RTL pour droite à gauche).

Définition formelle

Valeur initialenone
Applicabilitééléments de type bloc
Héritéenon
Valeur calculéecomme spécifié
Type d'animationdiscrète

Syntaxe formelle

clear = 
inline-start |
inline-end |
block-start |
block-end |
left |
right |
top |
bottom |
both-inline |
both-block |
both |
none

Exemples

clear: left

HTML

html
<div class="wrapper">
  <p class="black">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor.
  </p>
  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <p class="left">Ce paragraphe est dégagé à gauche.</p>
</div>

CSS

css
.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.left {
  border: 1px solid black;
  clear: left;
}
.black {
  float: left;
  margin: 0;
  background-color: black;
  color: #fff;
  width: 20%;
}
.red {
  float: left;
  margin: 0;
  background-color: red;
  width: 20%;
}
p {
  width: 50%;
}

clear: right

HTML

html
<div class="wrapper">
  <p class="black">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor.
  </p>
  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <p class="right">Ce paragraphe est dégagé à droite.</p>
</div>

CSS

css
.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.right {
  border: 1px solid black;
  clear: right;
}
.black {
  float: right;
  margin: 0;
  background-color: black;
  color: #fff;
  width: 20%;
}
.red {
  float: right;
  margin: 0;
  background-color: red;
  width: 20%;
}
p {
  width: 50%;
}

clear: both

HTML

html
<div class="wrapper">
  <p class="black">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus
    ac dui.
  </p>
  <p class="red">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor.
  </p>
  <p class="both">Ce paragraphe est dégagé de chaque côté.</p>
</div>

CSS

css
.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.both {
  border: 1px solid black;
  clear: both;
}
.black {
  float: left;
  margin: 0;
  background-color: black;
  color: #fff;
  width: 20%;
}
.red {
  float: right;
  margin: 0;
  background-color: red;
  width: 20%;
}
p {
  width: 45%;
}

Spécifications

Specification
Cascading Style Sheets Level 2
# propdef-clear
CSS Logical Properties and Values Level 1
# float-clear

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
clear
both
inline-end
inline-start
left
right

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

Voir aussi