Accueil    CSS    Propriété Clear
 



style css clear  Style CSS clear

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété clear permet de définir le comportement graphique de l'élément qu'elle décrit lorsque des éléments flottants (voir le style css float) sont autour d'elle.

Par défaut ce style est à "none" ce qui indique que l'élément sera positionné en fonction des éléments flottant qui l'entoure. Si par contre la propriété est vallorisé, elle n'acceptera pas d'éléments flottant sur les côtés spécifiés.

Il faut toutefois tenir compte de deux éléments important lorsque les styles float et clear sont utilisés :
- la notion d'affichage inline ou block des éléments html
- la notion d'ordre de traitement linéaire des balises dans le flux

Appliquer la propriété clear sur un élément de type inline (comme <span> ou <label>) n'aura pas le même effet que sur un élément de type block (comme <p> ou <div>). L'élément inline s'affichera en effet à la suite de l'élément flottant malgré l'instruction clear alors que l'élément de type block s'affichera lui en dessous.

D'autre part l'ordre de déclaration des balises impliquées dans une disposition employant les styles float et clear impacte directement le rendu, le parseur traitant les éléments dans l'ordre dans lequel ils arrivent.



Propriétés pour le style clear :




Propriété Définition Valeurs CSS
clear Indique si les éléments flottants sont autorisés autour de l'élément courant both
left
right
none
inherit
CSS 1


Exemple d'utilisation du style css clear :





Exemple de comportement avec des éléments inline et block :

Elément inline sans clear
<div style="float:left; height:40px; width:40px; border:solid 1px black;
   background-color:#56890E; line-height:40px;">DIV</div>
<span>exemple de texte <br />exemple de texte <br />exemple de texte <br /> exemple de texte <br /></span>

Elément inline avec clear
<div style="float:left; height:40px; width:40px; border:solid 1px black;
   background-color:#56890E; line-height:40px;">DIV</div>
<span style="clear:both;">exemple de texte <br />exemple de texte <br />exemple de texte <br /> exemple de texte <br /></span>


Elément block sans clear
<div style="float:left; height:40px; width:40px; border:solid 1px black;
   background-color:#56890E; line-height:40px;">DIV</div>
<p>exemple de texte <br />exemple de texte <br />exemple de texte <br /> exemple de texte <br /></p>

Elément block avec clear
<div style="float:left; height:40px; width:40px; border:solid 1px black;
   background-color:#56890E; line-height:40px;">DIV</div>
<p style="clear:both;">exemple de texte <br />exemple de texte <br />exemple de texte <br /> exemple de texte <br /></p>


Elément inline sans clear

DIV
exemple de texte
exemple de texte
exemple de texte
exemple de texte
exemple de texte

Elément inline avec clear

DIV
exemple de texte
exemple de texte
exemple de texte
exemple de texte
exemple de texte



Elément block sans clear

DIV

exemple de texte
exemple de texte
exemple de texte
exemple de texte
exemple de texte


Elément block avec clear

DIV

exemple de texte
exemple de texte
exemple de texte
exemple de texte
exemple de texte