Clearfix i wysokość rodzica w CSS

Zostawmy jeden div z klasą parent, usuniemy z niego tekst, zostawiając tylko pływający obrazek. Jak już wiesz, w tym przypadku wysokość diva zwinie się do zera, pozostanie tylko górna i dolna ramka. Obrazek zaś wystanie poza nasz div od dołu:

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

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

Результат:

Sprawmy, aby pływający obrazek rozszerzał nasz div na wysokość. Do tego używa się sprytnej sztuczki - umieścimy po obrazku div bez tekstu z klasą clearfix.

Nasz obrazek to element pływający i nie rozszerza rodzica na wysokość, ale div-clearfix - nie jest pływający i wpływa na wysokość rodzica.

Ponieważ div-clearfix ma ustawioną właściwość clear, to okaże się, że będzie on odsuwany obrazkiem w dół i stać pod nim, rozszerzając przy tym rodzica na wysokość.

Sam div-clearfix jest pusty i niewidoczny na ekranie, ale przy tym rozszerza rodzica na wysokość.

A zatem, spróbujmy:

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

Результат: