Die Auswirkung von Floats auf das Elternelement in CSS

Nehmen wir an, wir haben ein Div, in dem ein Bild liegt. Dem Div geben wir einen Rahmen, und dem Bild geben wir vorerst nicht die Eigenschaft float.

Sehen wir uns an, wie das im Browser aussehen wird:

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

div {
	border: 1px solid red;
}

Lassen Sie uns nun dem Bild die Eigenschaft float mit dem Wert left zuweisen. In diesem Fall passiert etwas Erstaunliches - die Höhe des Elternelements verschwindet, seine untere Rahmenlinie wird unmittelbar nach der oberen beginnen, und das Bild wird unten aus seinem Elternelement herausragen:

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

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

Es stellt sich heraus, dass Elemente, denen die Eigenschaft float zugewiesen wurde, ihr Elternelement in der Höhe nicht erweitern.

Lassen Sie uns den Wert der Eigenschaft float von left auf right ändern. Das Verhalten des Elternelements ändert sich nicht, aber das Bild wird rechts fließen:

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

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