Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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
Type de valeur
Valeur prédéfinie
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)

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'adap­tent à 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;

  • clear: initial; clear: inherit; clear: revert; clear: revert-layer; clear: unset;

    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.

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.

1
clear
Estimation de la prise en charge en pourcentage du parc actuel.
96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Version testée : 108 (2022)

Chrome

Version testée : 108 (2022)

Chrome pour Androïd

Version testée : 108 (2022)

Edge

Version testée : 108 (2022)

Firefox

Version testée : 108 (2022)

Firefox pour Androïd

Version testée : 107 (2022)

Internet Explorer

Version testée : 11 (2013)

Opéra

Version testée : 92 (2022)

Opéra Mobile

Version testée : 72 (2022)

Safari

Version testée : 16.2 (2022)

Safari sur IOS

Version testée : 16.2 (2022)

Samsung Internet

Version testée : 19.0 (2022)
Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse

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.

Propriétés.

Positionnement relatif des éléments les uns par rapport aux autres.
⚠
⚠
⚠
Définit par rapport à quoi les éléments flottants doivent se positionner.