Clear - Propriété CSS

Schéma syntaxique de clear.

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.

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 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 :

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.

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.

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

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.

• 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 1995

  Document de travail.

  

  12 Novembre 1996

  Proposé à la recommandation.

  

  17 Décembre 1996

  Recommandation.

  

  13 Septembre 2018

  Ancienne 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 valeur inherit.
  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

• Module CSS - Propriétés et valeurs logiques - Niveau 1

  Précisions complémentaires sur les valeurs logiques acceptées par clear.
  

  18 Mai 2017

  Document de travail.

  

  

  

• Module CSS - Pages flottantes - Niveau 3

  Ajout des valeurs logiques inline-start et inline-end.
  Acceptation de nouvelles valeurs pour les modes d'écriture verticaux top, block-start, etc.
  

  15 Septembre 2015

  Document 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.

Propriétés :