La propriété CSS clear

Clear fonctionne en combinaison avec float et empêche un élément d'être adjacent à un autre: il le renvoie sur une nouvelle ligne.
Clear dépend de l'élément précédent, dans le même conteneur, il ne prend pas en compte la propriété clear dans le style du même élément.

left

L'élément se place au-dessous de tous les éléments dont la propriété float est left.

right

De même pour les éléments avec float right.

both

L'élément se place au dessous de tous les éléments dans le même conteneur avec un propriété float left ou right.

none

La propriété est annulée.

Exemples

<p style="float: left; "> 
<p style="clear: left;">  

Clear s'applique au second paragraphe qui est positionné sur la gauche.

Contre-exemples

<p style="float: right; "> 
<p style="clear: left;">  

Clear n'a pas d'effet car le paragraphe précédent est en float à droite et il se rapporte à l'attribut float left.

<p style="float: left;clear: left;">  

Clear n'a pas d'effet car les attributs float et clear font partie du style du même paragraphe.

Références

© 2010-2012 Xul.fr