Texte dans un parent de flottants en CSS

Supprimons la propriété height pour la div et plaçons un petit texte avant l'image.

Dans ce cas, la hauteur de notre div sera égale à la hauteur du texte, et l'image dépassera toujours de la div :

<div>
	texte
	<img src="img.png" alt="">
</div>

div {
	border: 1px solid red;
}
img {
	float: right;
}

Plaçons le texte après l'image - le résultat ne changera pas :

<div>
	<img src="img.png" alt="">
	texte
</div>

div {
	border: 1px solid red;
}
img {
	float: right;
}

Faisons en sorte que l'image flotte sur le bord gauche - le résultat sera similaire :

<div>
	<img src="img.png" alt="">
	texte
</div>

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

Ajoutons une autre div en dessous - l'image empiétera également sur elle :

<div>
	<img src="img.png" alt="">
	texte
</div>
<div>
	texte
</div>

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

Si, en revanche, on ajoute tellement de texte dans la première div que sa hauteur dépasse celle de l'image - elle n'empiétera pas sur la deuxième div :

<div>
	<img src="img.png" alt="">
	some long text
</div>
<div>
	texte
</div>

div {
	text-align: justify;
	border: 1px solid red;
}
img {
	float: left;
}

Ce point est très important - lors du développement, il peut arriver que dans un certain bloc vous ayez beaucoup de texte, puis que lors du fonctionnement réel du site, ce bloc contienne moins de texte que prévu. Il en résultera que dans ce cas, le problème d'empiètement des éléments flottants sur les blocs voisins se manifestera.