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.Schéma syntaxique de clear
.
clear
Les liens du schéma donnent accès à plus de détails
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;
Valeurs communes :
clear: initial (none
)
clear: inherit
clear: revert
clear: revertLayer
clear: unset
Ces valeurs sont décrites plus en détail sur leur page respective : initial
, inherit
, revert
, revert-layer
, unset
.
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
pour interdire le flottement d'un élément.clear
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini
Historique de la propriété clear
.
-
CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1
Définition initiale de la propriétéfloat
lors de la première spécification de CSS.17 Novembre 1995Document de travail.12 Novembre 1996Proposé à la recommandation.17 Décembre 1996Recommandation.13 Septembre 2018Ancienne spécification, déclarée obsolète. -
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1
Acceptation de la valeurinherit
.04 Novembre 1997Document de travail.24 Mars 1998Proposé à la recommandation.11 Mai 1998Recommandation. -
Module CSS - Propriétés et valeurs logiques - Niveau 1
Précisions complémentaires sur les valeurs logiques acceptées parclear
.18 Mai 2017Document de travail. -
Module CSS - Pages flottantes - Niveau 3
Ajout des valeurs logiquesinline-start
etinline-end
.
Acceptation de nouvelles valeurs pour les modes d'écriture verticauxtop
,block-start
, etc.15 Septembre 2015Document de travail.
Voir aussi, à propos des éléments flottants.
La notion d'éléments flottants existe depuis longtemps, et a été décrite dans de nombreuses spécifications. Les définitions les plus actuelles se trouvent dans le module CSS Page Floats.