Clearfix in višina starša v CSS

Pustimo en div z razredom parent, odstranimo besedilo iz njega, pustimo le lebdečo sliko. Kot že veste, se bo v tem primeru višina diva strnila na nič, ostali bodo le zgornja in spodnja obroba. Slika pa bo štrlela iz našega diva na dnu:

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

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

Результат:

Naredimo tako, da bo lebdeča slika razširila naš div po višini. Za to se uporablja premeten trik - po sliki postavimo div brez besedila z razredom clearfix.

Naša slika je lebdeči element in ne razširja starša po višini, toda div-clearfix - ni lebdeč in vpliva na višino starša.

Ker je lastnosti clear dodeljena div-clearfixu, se bo izkazalo, da se bo slika odrivala navzdol in stala pod njo, pri tem pa razširjala starša po višini.

Sam div-clearfix je prazen in ni viden na zaslonu, vendar pri tem razširja starša po višini.

Torej, poskusimo:

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

Результат: