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.

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. Ce mouvement (lorsqu'il se produit) empêche la fusion des marges (margin collapsing).

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 on souhaite qu'un élément 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.

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

Valeur initialenone
Applicabilitééléments de type bloc
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Animablenon
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

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

/* Valeurs globales */
clear: inherit;

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.
right
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).

Syntaxe formelle

none | left | right | both | inline-start | inline-end

Exemples

Note : On utilise ici un div avec la classe wrapper afin d'ajouter une bordure permettant de mieux percevoir l'utilité de la propriété clear.

clear: left

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

.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

<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

.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

<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

.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

Spécification État Commentaires
CSS Logical Properties Level 1
La définition de 'float and clear' dans cette spécification.
Brouillon de l'éditeur Ajout des valeurs inline-start et inline-end
CSS Level 2 (Revision 1)
La définition de 'clear' dans cette spécification.
Recommendation Pas de modification significative, clarification de certains détails.
CSS Level 1
La définition de 'clear' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple 1.0 1.0 (1.7 ou moins) 4.0 3.5 1.0
inline-start, inline-end Pas de support 45 (45) [1] Pas de support Pas de support Pas de support
Fonctionnalité Android Firefox Mobile (Gecko) Firefox OS IE Phone Opera Mobile Safari Mobile
Support simple 1.0 1.0 (1) 1.0 6.0 6.0 1.0
inline-start, inline-end Pas de support 45.0 (45) [1] 2.5 Pas de support Pas de support Pas de support

[1] Fonctionnalité activée par défaut sur Nightly et Aurora. Pour activer la fonctionnalité sur une version beta ou release, il faut activer la préférence layout.css.float-logical-values.enabled avec la valeur true.

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, fscholz, Sebastianz, J.DMB, louuis, teoli, FredB, Kyodev, Fredchat
 Dernière mise à jour par : SphinxKnight,