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:

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

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

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

Результат: