Le contrôle du flux autour des flottants

la propriété 'clear'

'clear'

Valeur :	none | left | right | both | inherit
Initiale :	none
S'applique à :	ceux des éléments de type bloc
Héritée :	non
Pourcentage :	sans objet
Médias :	visuel

Cette propriété indique quels côtés d'une ou des boîtes d'un élément ne doivent pas être adjacents à une boîte flottante précédente. (Il peut arriver que l'élément lui-même ait des descendants flottants, la propriété 'clear' n'a alors aucun effet sur eux).

Cette propriété ne peut s'appliquer qu'aux élément 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.

Voici la signification des valeurs admises par la propriété quand on l'applique aux boîtes de bloc non flottantes :

left

La marge haute de la boîte générée est augmentée juste assez pour que le bord haut de sa bordure soit sous le bord externe bas d'une boîte flottant à gauche issue d'un élément précédent du document source ;

right

Reprendre le précédent en inversant gauche et droite ;

both

La boîte générée se déplace sous chacune des boîtes flottantes qui sont issues d'éléments précédents du document source ;

none

La boîte ne subit aucune contrainte de position vis-à-vis des flottants.

Quand on applique cette propriétés 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 boîtes précédentes qui flottent à gauche (pour la valeur 'clear:left'), ou qui flottent à droite (pour la valeur 'clear: right'), ou toutes celles qui flottent (pour la valeur 'clear: both').