Propriété clear

La propriété clear annule l'habillage d'un élément par d'autres, défini par la propriété float. Peut prendre les valeurs suivantes : none (annule sa propre action), both (annule float simultanément à droite et à gauche), left (annule float à gauche), right (annule float à droite).

Syntaxe

sélecteur {
	clear: none ou left ou right ou both
}

Exemple

Annulons l'habillage de l'image par le texte à gauche :

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		text text text text text text
		text text text text text text
		text text text text text text
		text text text text text text
	</p>
</div>

.image {
	float: left;
	padding-right: 10px;
}
.txt {
	clear: left;
}

Exemple

Maintenant, annulons l'habillage de l'image par le texte à droite :

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		text text text text text text
		text text text text text text
		text text text text text text
		text text text text text text
	</p>
</div>

.image {
	float: right;
	padding-right: 10px;
}
.txt {
	clear: right;
}

Exemple

Annulons l'action de la propriété clear elle-même :

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		text text text text text text
		text text text text text text
		text text text text text text
		text text text text text text
	</p>
</div>

.image {
	float: right;
	padding-right: 10px;
}
.txt {
	clear: none;
}

Voir aussi

la propriété bottom,
qui définit la position du bord inférieur de l'élément
la propriété top,
qui définit la position du bord supérieur de l'élément
la propriété left,
qui définit la position du bord gauche de l'élément
la propriété right,
qui définit la position du bord droit de l'élément
le pseudo-élément ::backdrop,
qui définit le positionnement après le premier élément
la propriété caption-side,
qui définit la position du titre du tableau