Clearfix i visina roditelja u CSS

Ostavimo jedan div sa klasom parent, uklonimo iz njega tekst, ostavivši samo lebdeću sliku. Kao što već znate, u ovom slučaju visina div-a će se srušiti na nulu, od njega će ostati samo gornja i donja granica. Slika će isplivati ispod našeg div-a:

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

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

Результат:

Učinimo da lebdeća slika proširi naš div po visini. Za ovo se koristi jedan trik - postavimo div bez teksta sa klasom clearfix nakon slike.

Naša slika je lebdeći element i ne proširuje roditelja po visini, ali div-clearfix - nije lebdeći i utiče na visinu roditelja.

Pošto je div-clearfix-u podešeno svojstvo clear, ispostaviće se da će se on odgurivati od slike na dole i stajati ispod nje, proširujući pritom roditelja po visini.

Sam div-clearfix je prazan i nije vidljiv na ekranu, ali pri tome proširuje roditelja po visini.

Dakle, hajde da probamo:

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

Результат: