Clearfix und Elterngröße in CSS

Lassen wir ein Div mit der Klasse parent, entfernen den Text daraus und lassen nur das schwebende Bild übrig. Wie Sie bereits wissen, kollabiert in diesem Fall die Höhe des Divs auf Null, von ihm bleiben nur der obere und untere Rahmen übrig. Das Bild wird unten aus unserem Div herausragen:

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

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

Lassen Sie uns dafür sorgen, dass das schwebende Bild die Höhe unseres Divs vergrößert. Dafür wird ein kniffriger Trick verwendet - setzen wir nach dem Bild ein Div ohne Text mit der Klasse clearfix.

Unser Bild ist ein schwebendes Element und vergrößert nicht die Höhe des Elternelements, aber das Div-Clearfix ist nicht schwebend und beeinflusst die Höhe des Elternelements.

Da dem Div-Clearfix die Eigenschaft clear zugewiesen ist, wird es passieren, dass es vom Bild nach unten weggedrückt wird und unter ihm steht, wodurch es die Höhe des Elternelements vergrößert.

Das Div-Clearfix selbst ist leer und auf dem Bildschirm nicht sichtbar, vergrößert aber dabei die Höhe des Elternelements.

Also, lassen Sie es uns versuchen:

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

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

.clearfix {
	clear: both;
}