Clearfix en ouderhoogte in CSS

Laten we één div met klasse parent laten, de tekst eruit halen, en alleen de zwevende afbeelding laten. Zoals je al weet, zal in dit geval de hoogte van de div inklappen tot nul, er blijft alleen de boven- en onderrand over. De afbeelding zal onderaan uit onze div steken:

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

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

Laten we ervoor zorgen dat de zwevende afbeelding onze div in hoogte uitbreidt. Hiervoor wordt een handige truc gebruikt - laten we na de afbeelding een div zonder tekst plaatsen met de klasse clearfix.

Onze afbeelding is een zwevend element en breidt de ouder niet uit in hoogte, maar de div-clearfix - is niet zwevend en beïnvloedt de hoogte van de ouder.

Omdaan de div-clearfix de eigenschap clear heeft gekregen, zal het resultaat zijn dat hij door de afbeelding naar beneden wordt geduwd en eronder komt te staan, waardoor de ouder in hoogte wordt uitgebreid.

De div-clearfix zelf is leeg en niet zichtbaar op het scherm, maar breidt tegelijkertijd de ouder uit in hoogte.

Laten we het proberen:

<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;
}