Het effect van floats op de ouder in CSS

Stel dat we nu een div hebben waarin een afbeelding staat. Laten we de div een rand geven, en de afbeelding voorlopig nog geen float eigenschap geven.

Laten we eens kijken hoe dit eruit zal zien in de browser:

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

div {
	border: 1px solid red;
}

Laten we nu voor de afbeelding de eigenschap float instellen op de waarde left. In dit geval gebeurt er iets opmerkelijks - de hoogte van de ouder verdwijnt, de onderrand zal direct na de bovenrand beginnen, en de afbeelding komt onder zijn ouder vandaan:

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

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

Het blijkt dat elementen waaraan de eigenschap float is toegewezen, hun ouder niet in hoogte uitbreiden.

Laten we de eigenschap float in plaats van left de waarde right geven. Het gedrag van de ouder verandert niet, maar de afbeelding zal rechts gaan zweven:

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

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