clear - Propriété CSS
Résumé des caractéristiques de la propriété clear
none
| left
| right
| both
| inline-start
| inline-end
| block-start
| block-end
none
clear
passe d'une valeur à l'autre sans transition.Description de la propriété clear
.
clear
indique si l'élément est autorisé à côtoyer les éléments flottants qui le précèdent.
Cette propriété est complémentaire de la propriété float
. Elle en limite la portée. Lorsqu'un élément est
déclaré flottant, les éléments suivants peuvent venir se positionner à côté de lui.
Cela peut concerner plusieurs éléments : tant qu'il y a de la place disponible à côté de l'élément flottant.
La propriété clear
permet d'empêcher un élément de venir se mettre à côté d'un élément flottant.
Prise en charge de la langue et du mode d'écriture.
Les valeurs logiques comme inline-start
permettent de prendre en compte la direction d'écriture en fonction de la langue.
left
right
Syntaxes pour clear
.
- clear: none;
Valeur par défaut. Autorise le flottement. Cet élément peut se placer à coté des éléments flottants s'il en existe avant lui.
- clear: left;
N'autorise pas le côtoiement des éléments flottants à gauche qui précédent. Mais l'élément peut se placer à coté des éléments flottants à droite s'il en existe avant lui.
- clear: right;
Symétrique de la valeur précédente : n'autorise pas le côtoiement des éléments flottants à droite qui précédent. Mais n'empêche pas le placement à coté des éléments flottants à gauche.
- clear: both;
N'autorise pas le côtoiement des éléments flottants qui précédent. L'élément se positionne contre la marge, en dessous des éléments flottants éventuels, comme si ces derniers n'étaient pas flottants.
- clear: inline-start; clear: inline-end;
Ces deux valeurs sont équivalentes à
left
etright
pour les langues latines, mais s'adaptent au mode d'écriture pour les langues non latines telles que l'arabe ou les langues CJK. - clear: block-start; clear: block-end;
La valeur initiale est :
.none
Exemple interactif.
La première image est déclarée flottante sur la gauche (float:left
).
La deuxième image est quant à elle flottante sur la droite.
Les 2 paragraphes de texte se "faufilent" entre les deux images ou pas,
suivant la valeur de leur propriété clear
.
Compatibilité des navigateurs.
Tous les navigateurs actuels traitent correctement la propriété clear
.
clear
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que clear
.
Les spécifications CSS éditées par le W3C sont organisées en modules. clear
fait partie du Module CSS - Pages flottantes (CSS Page Floats). Les définitions suivantes sont également décrites dans ce même module.