La propriété "clear" va être utilisée pour définir si un élément doit se trouver sur la même bande horizontale qu’un élément flottant. On peut donc écrire que cette propriété indique de quelle manière le texte va être placé par rapport à une boîte flottante précédente. Cette propriété ne bénéficie pas de l'héritage.

N'importe quel élément peut être défini avec la propriété "float" : Les paragraphes, les divisions, les listes, les tables, et des images . Il peut donc avoir une "largeur" et une "taille et c'est recommandé pour la largeur.

Cette propriété ne peut s'appliquer qu'aux éléments de type bloc (dont les flottants). Dans le cas des boîtes compactes et en enfilade, la propriété s'applique à la boîte de bloc finale à laquelle celles-ci appartiennent.

Valeurs admises pour "clear" quand appliquées aux boîtes de bloc non flottantes .

- left : va placer l'élément en bas juste à droite de celui qui le précède dans le code source.

- right : à l'inverse du précédent, va placer l'élément en bas juste à gauche de celui qui le précède dans le code source.

- both : ici la boîte générée va se déplacer sous chacune des boîtes flottantes qui précèdent dans le code source.

- none : Dans ce cas rien n'est affecté par rapport aux éléments flottants et cette propriétén'influence pas le positionnement en cours.

Noter que lorsqu'on applique cette propriété aux éléments flottants, une modification des règles de leur positionnement intervient. On ajoute une contrainte supplémentaire (la dixième) : Le sommet du bord externe de cette boîte flottante doit se trouver en dessous de toutes les boîtes précédentes ("clear: both") ou qui flottent à gauche ("clear:left"), ou enfin qui flottent à droite ("clear: right").

---

 

"clear: left" pour positionner le texte en dessous, à gauche

Code 12 dans HEAD

.conteneur
{ width: 300px ;
height: 150px ;
border: solid 1px #990000 ; }

.floatleft
{ float: left ;
width: 50px ;
height: 50px ;
background-color: #00FF00 ; }

.flux
{ clear: left : }

Code 12 dans BODY

<div class="conteneur"> <div class="floatleft"> float </div>
Lorem ipsum dolor sit amet.....volutpat. </div>

Résultat exemple 12

vous retrouvez l'exemple 4 d'une précédente page à l'exception de l'élément "float" qui cette fois est défini à gauche. De plus avec l'ajout de la propriété "clear" il est possible de définir la manière dont le texte va se positionner, et ici après l'élément texte. (pour mémoire, en HTML on utilise les balises "hspace" et "vspace")

Il en ira de même pour la propriété "clear:right" qui inversera la position de l'élément "float" à droite.

---

"clear: both" pour positionner le texte, en dessous et après deux ou plusieurs éléments

 

Code 13 dans HEAD

.conteneur1
{ width: 300px ;
height: 200px ;
border: 1px solid #990000 ; }

.floatleft1
{ float: left ;
width: 75px ;
height: 100px ;
background-color: #66FFFF ; }

.flux1
{ clear: both ; }

 

Code 13 dans BODY

<div class="conteneur1"> <div class="floatleft"> <b> float </b> </div> <div class="floatleft1"> <b> float 1 </b> </div> <p class="flux1"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </p></div>

 

Résultat exemple 13