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:

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

css.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:

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

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

.clearfix {
  clear: both;
}

Результат: