L'effet des flottants sur le parent en CSS

Supposons maintenant que nous ayons une div contenant une image. Nous allons appliquer une bordure à la div, et pour l'instant, nous n'attribuerons pas la propriété float à l'image.

Voyons à quoi cela ressemble dans le navigateur :

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

div {
	border: 1px solid red;
}

Maintenant, attribuons à l'image la propriété float avec la valeur left. Dans ce cas, une chose étonnante se produit - la hauteur du parent disparaît, sa bordure inférieure commencera immédiatement après la bordure supérieure, et l'image dépassera par le bas de son parent :

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

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

Il s'avère que les éléments auxquels est attribuée la propriété float n'étendent pas la hauteur de leur parent.

Remplaçons la valeur left de la propriété float par la valeur right. Le comportement du parent ne changera pas, mais l'image commencera à flotter à droite :

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

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