Annulation du flottement avec la propriété clear en CSS

Pour résoudre ce problème, il existe une propriété spéciale clear, qui annule le flottement. La valeur left annule le flottement à gauche, la valeur right - à droite, et la valeur both - des deux côtés. Cette valeur est la plus utilisée.

Ainsi, la propriété clear annule le flottement. Dans notre cas, cela nous permettra de faire en sorte que l'image flottante de la première div ne chevauche pas la seconde div.

Par ailleurs, clear doit être appliqué à l'élément sur lequel les éléments flottants ne doivent pas empiéter, c'est-à-dire dans notre cas, il convient de l'appliquer à la seconde div.

Faisons cela - donnons à la seconde div, en plus de la classe parent, la classe clearfix et pour cette nouvelle classe, définissons la propriété clear avec la valeur both - le chevauchement de l'image disparaîtra :

<div class="parent">
	<img src="img.png" alt="">
	text
</div>
<div class="parent clearfix">
	text
</div>

.parent {
	border: 1px solid red;
}
.parent img {
	float: left;
}

.clearfix {
	clear: both;
}

Le nom clearfix est communément accepté, donc utilisez-le à l'avenir.