Clearfix un vecāka elementa augstums CSS

Atstāsim vienu div ar klasi parent, noņemsim no tā tekstu, atstājot tikai peldošo attēlu. Kā jūs jau zināt, šajā gadījumā div augstums saruks līdz nullei, no tā paliks tikai augšējā un apakšējā robeža. Attēls izkļūs ārā no mūsu div apakšā:

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

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

Padarīsim tā, lai peldošais attēls paplašinātu mūsu div augstumā. Šim nolūkam tiek izmantots viltīgs paņēmiens - pēc attēla ievietosim div bez teksta ar klasi clearfix.

Mūsu attēls ir peldošs elements un nepaplašina vecāka elementa augstumu, bet clearfix div - nav peldošs un ietekmē vecāka elementa augstumu.

Tā kā clearfix div ir noteikta īpašība clear, tad iznāks, ka tas tiks atstumts lejup ar attēlu un stāvēs zem tā, paplašinot tajā pašā laikā vecāka elementa augstumu.

Pats clearfix div ir tukšs un nav redzams ekrānā, bet tajā pašā laikā paplašina vecāka elementa augstumu.

Tātad, pamēģināsim:

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