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.

Manipulation de la propriété clear par programme.

Les valeurs logiques comme inline-start permettent de prendre en compte la direction d'écriture en fonction de la langue.

Valeurs 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; ⚠

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

Manipulation de la propriété clear par programme.

Gérer les éléments flottants avec Javascript.

Les éléments flottants sont déterminées par deux propriétés : clear et float. Voici comment modifier la valeur de clear avec Javascript. Ce langage accepte deux syntaxes, la première avec la notation typique de CSS, en utilisant le tableau des styles, et la deuxième syntaxe, plus habituelle dans les langages objet.

let el = document.getElementById('id'); el.style['clear'] = 'left'; // ou let el = document.getElementById('id'); el.style.clear = 'left';

Avec Javascript, lire la valeur de clear.

Pour que ce code fonctionne, la propriété doit avoir été affectée directement à l'élément lui-même via son attribut style (c'est ce que fait le code précédent), et non pas en passant par un sélecteur CSS.

let el = document.getElementById('id'); let value = el.style['clear']; // ou let el = document.getElementById('id'); let value = el.style.clear;

Avec Javascript, lire la valeur calculée de clear.

La valeur calculée est celle qui résulte de la cascade d'héritages. Elle est toujours définie, au pire c'est la valeur initiale de la propriété.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('clear');

Avec JQuery, modifier la valeur de clear.

JQuary propose lui aussi deux syntaxes pour définir la propriété clear.


$('#id').css('clear', 'left');


Avec JQuery, lire la valeur calculée de clear.

let value = $('#id').css('clear');

Autres exemples de code.

Vous pouvez trouver d'autres exemples de code Javascript et JQuery sur la page Javascript et CSS : ajout de feuilles de styles, ajout ou suppression de classe, etc.

Testez vous-même.

En cliquant sur les boutons ci-dessous, vous appliquez la valeur saisie à la propriété clear et affichez ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de clear. Comme la propriété n'accepte que des valeurs prédéfinies, il n'y aura pas de différence entre ces deux valeurs pour la propriété clear, sauf si la valeur affectée est incorrecte. Dans ce cas, la valeur affectée est nulle et la valeur calculée revient sur la valeur initiale (none).

Simulateur avec la propriété clear.

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.

Prise en charge de clear par les navigateurs.

Tous les navigateurs actuels traitent correctement la propriété clear dans sa définition initiale. En ce qui concerne la définition du niveau 3 de la spécification, il y a encore des problème avec les nouvelles valeurs, en particulier block-start et block-end.

1

Propriété
clear
(CSS2)

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

  Ce premier niveau de la spécification CSS décrit le mécanisme des feuilles de styles en cascade. Les auteurs et les lecteurs peuvent ajouter des styles aux documents. Principalement destiné à la mise en forme des documents HTML, CSS permet de définir les couleurs, les polices de caractères, la mise en forme du texte, les espacements (marges), etc. Le langage CSS est d'une compréhension aisée, lisible et facile à rédiger, il utilise les termes courants de la publication de bureau.

  Concernant clear. 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

  Ce niveau 2 de la spécification décrit le mécanisme des styles en cascade de CSS. Ce langage est utilisé pour formater les documents HTML ou XML. Il prend en charge les feuilles de style spécifiques aux médias afin que les auteurs puissent adapter la présentation de leurs documents aux navigateurs visuels, aux dispositifs auditifs, aux imprimantes, aux appareils braille, aux appareils portables, etc.

  Concernant clear. 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

  Ce module de spécification définit des propriétés qui définissent indirectement certaines autres propriétés en fonction du mode d'écriture : de gauche à droite, de droite à gauche ou de haut en bas. Elles sont utiles dans des feuilles de style simples et génériques, comme les feuilles de style des navigateurs, mais peuvent également permettre d'économiser quelques lignes de styles pour les documents contenant à la fois du texte de gauche à droite et de droite à gauche.

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

  18 Mai 2017

  Document de travail.

  

  

  

• Module CSS - Pages flottantes - Niveau 3

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

Propriétés :