Clearfix a výška rodiče v CSS

Ponechme jeden div s třídou parent, odeberme z něj text a ponechme pouze plovoucí obrázek. Jak již víte, v tomto případě se výška divu zhroutí na nulu, zůstane z něj pouze horní a dolní okraj. Obrázek vykoukne z našeho divu dole:

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

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

Udělejme to tak, aby plovoucí obrázek rozšiřoval náš div na výšku. K tomu se používá chytrý trik - za obrázek umístíme div bez textu s třídou clearfix.

Naše obrázek je plovoucí element a nerozšiřuje rodiče na výšku, ale div-clearfix - není plovoucí a ovlivňuje výšku rodiče.

Protože divu-clearfixu je nastavena vlastnost clear, výsledek bude takový, že bude obrázkem odstrkován dolů a bude stát pod ním, přičemž tím rozšiřuje rodiče na výšku.

Samotný div-clearfix je prázdný a na obrazovce není vidět, ale zároveň rozšiřuje rodiče na výšku.

Tak to zkusme:

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