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.

Note : Si vous voulez un élément pour contenir tous les éléments flottants, vous pouvez laisser l'élément ainsi ou utiliser clear sur un ::after pseudo-élément remplacé.

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

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

Specification Status Comment
CSS Level 2 (Revision 1)
La définition de 'clear' dans cette spécification.
Recommendation Aucun changement significatif.
CSS Level 1
La définition de 'clear' dans cette spécification.
Recommendation Spécification initiale

Compatibilité des navigateurs

Fonctionalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base 1.0 1.0 (1.7 ou moins) 4.0 3.5 1.0
Fonctionalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support de base 1.0 1.0 (1) 6.0 6.0 1.0

Voir également

Étiquettes et contributeurs liés au document

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