Clear - Propriété CSS

clear

Résumé des caractéristiques de la propriété clear

Description rapide
Autorise ou interdit le côtoiement des éléments (habillage).
Statut
Standard
Utilisable sur
HTML
Valeurs prédéfinies
none | left | right | both | inline-start | inline-end | block-start | block-end
Pourcentages
Ne s'appliquent pas.
Valeur initiale
none
Héritée par défaut
Non.
Type d'animation
Discrète : lors d'une animation, la propriété clear passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Pages flottantes
Références (W3C)
 🡇  
 🡅  
Statut du document: WD (document de travail)
Statut du document: WD (document de travail)
Statut du document: REC (recommandation)
Statut du document: DEPR (Ancienne spécification, déclarée obsolète)

Schéma syntaxique de clear.

clear - Syntax DiagramSyntax diagram of the clear CSS property. See stylescss.free.fr for details. none none left left right right both both inline-start inline-start inline-end inline-end block-start ⚠ block-start ⚠ block-end ⚠ block-end ⚠clear:;clear:;
Schéma syntaxique de la propriété 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
La direction et le sens d'écriture de ce texte s'adaptent à la langue choisie.
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: 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 et right 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.

clear :
Image flottante à gauche
Le CSS (Cascading Style Sheets) est un langage déclaratif destiné à la mise en forme et la mise en page d'un document, le plus souvent une page web. Créé par la W3C dans les années 1990, il est totalement pris en charge par les navigateurs dans les années 2000. La première réelle proposition de feuilles de style est proposée par Hakon Wium Lie. La spécification CSS1 finale est publiée le 17 décembre 1996. La première version du CSS permet essentiellement la gestion de la typographie : polices, couleurs, attributs typographiques, etc.
Image flottante à droite
En 1997, l'étude du CSS est confiée à une équipe du W3C présidée par Chris Lilley. Ce groupe contient des représentants des plus grands navigateurs web. Il faudra attendre 1998 pour que la seconde version du CSS voie le jour, apportant plus de 70 nouvelles propriétés. Le développement de la version CSS3 débute en 1999, mais le développement est difficile à cause de problèmes de mise à jour et d'implémentation. L'évolution du CSS se poursuit néanmoins et il faudra attendre plus de 10 années pour finaliser sa version 3.

Compatibilité des navigateurs.

Tous les navigateurs actuels traitent correctement la propriété clear.

Colonne 1
Support de la propriété clear pour interdire le flottement d'un élément.
1
Propriété
clear
Estimation de la prise en charge globale.
95%

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

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse

Historique de la propriété clear.

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 Module CSS - Pages flottantes.

Propriétés :

Clear
Autorise ou interdit le côtoiement des éléments (habillage).
float
Float définit les éléments qui peuvent se côtoyer horizontalement, ou plus généralement sur la longueur d'une ligne.