Clearfix és a szülő magassága a CSS-ben

Hagyjunk egy div-ot a parent osztállyal, távolítsuk el belőle a szöveget, csak a lebegő képet hagyjuk meg. Ahogy azt már tudod, ebben az esetben a div magassága nullára zsugorodik, csak a felső és az alsó szegélye marad meg. A kép ki fog nyúlni a divunk alulról:

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

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

Tegyük úgy, hogy a lebegő kép kinyújtsa a divunkat magasságban. Ehhez egy trükkös módszert használnak - helyezzünk a kép után egy div-ot szöveg nélkül a clearfix osztállyal.

A képünk egy lebegő elem és nem növeli a szülő magasságát, de a clearfix div - nem lebegő és befolyásolja a szülő magasságát.

Mivel a clearfix div-nek a clear tulajdonság van beállítva, az történik, hogy a kép le fogja lökni lefelé és alatta fog állni, miközben kinyújtja a szülőt magasságban.

Maga a clearfix div üres és nem látható a képernyőn, de közben kinyújtja a szülőt magasságban.

Szóval, próbáljuk ki:

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