Клiарфікс і вышыня бацькі ў CSS

Давайце пакінем адзін дыў з класам parent, прыбярэм з яго тэкст, пакінуўшы толькі плаваючы відарыс. Як вы ўжо ведаеце, у гэтым выпадку вышыня дыва схлопнецца ў нуль, ад яго застанецца толькі верхняя і ніжняя мяжа. Відарыс жа вылезе за наш дыў знізу:

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

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

Результат:

Давайце зробім так, каб плаваючы відарыс пашыраў наш дыў па вышыні. Для гэтага выкарыстоўваецца хiтры прыём - паставім пасля відарысу дыў без тэксту з класам clearfix.

Наш відарыс плаваючы элемент і не пашырае бацьку па вышыні, але дыў-клiарфікс - не плаваючы і ўплывае на вышыню бацькі.

Так як дыву-клiарфіксу зададзена ўласцівасць clear, то атрымаецца, што ён будзе адштурхоўвацца відарысам уніз і стаяць пад ім, пашыраючы пры гэтым бацьку па вышыні.

Сам дыў-клiарфікс пусты і не бачны на экране, але пры гэтым пашырае бацьку па вышыні.

Такім чынам, давайце паспрабуем:

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

Результат: