Clearfix a výška rodiča v CSS

Ponechajme jeden div s triedou parent, odstráňme z neho text a ponechajme iba plávajúci obrázok. Ako už viete, v tomto prípade sa výška div zníži na nulu, zostane z neho iba horný a dolný okraj. Obrázok vypadne z nášho div dole:

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

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

Urobme to tak, aby plávajúci obrázok rozšíril náš div na výšku. Na to sa používa šikovný trik - za obrázkom umiestnime div bez textu s triedou clearfix.

Naš obrázok je plávajúci prvok a nerozširuje rodiča na výšku, ale div-clearfix - nie je plávajúci a ovplyvňuje výšku rodiča.

Pretože div-clearfix má nastavenú vlastnosť clear, výsledkom bude, že bude obrázkom odtlačený dole a bude stáť pod ním, pričom tým rozširuje rodiča na výšku.

Samotný div-clearfix je prázdny a nie je viditeľný na obrazovke, ale zároveň rozširuje rodiča na výšku.

Poďme to vyskúšať:

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