clear

Résumé

La propriété CSS clear définit si un élément peut être à côté des éléments flottants qui le précèdent ou s'il doit être placé en dessous d'eux (être libéré).

La propriété clear s'applique aussi bien aux éléments flottants qu'aux éléments non flottants.

Lorsqu'elle s'applique à des blocs non flottants, elle déplace la bordure de l'élément vers le bas, jusqu'à ce qu'elle soit en dessous des marges de tous les éléments flottants appropriés. Ce déplacement (lorsqu'il survient) empêche la Fusion des marges.

Lorsqu'elle s'applique à des éléments flottants, elle déplace la marge de l'élément jusqu'à ce qu'elle soit en dessous des marges de tous les éléments flottants appropriés. Ceci affecte la position des éléments flottants qui suivent, car ils ne peuvent pas être positionnés plus haut que les précédents.

Les éléments flottants qui peuvent se libérer sont ceux qui se trouvent au début d'un même contexte de formation de blocs.

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

• Valeur initiale none
• S'applique à block-level elements
• Héritée non
• Pourcentages —
• Média visual
• Valeur calculée comme spécifié
• Animable non
• Ordre canonique l'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

Formal syntax: none | left | right | bothclear: none
clear: left
clear: right
clear: both

clear: inherit

Valeurs

none

L'élément n'est pas déplacé vers le bas pour se libérer des éléments flottants précédents.

left

L'élément est déplacé vers le bas pour se libérer des éléments flottants à gauche.

right

L'élément est déplacé vers le bas pour se libérer des éléments flottants à droite.

both

L'élément est déplacé en dessous des éléments flottants de gauche et de droite.

Exemples

Voir l'exemple sur une page

h1 { clear: none }
h2 { clear: right }

Spécifications

Compatibilité des navigateurs

Voir également

• Position-related CSS properties: position, float, top, right, bottom, left, display, visibility, clear
• Box model