Кліарфікс і висота батьківського елемента в CSS

Кліарфікс і висота батьківського елемента в CSS

Плаваючі елементи з властивістю float не збільшують висоту свого батьківського елемента.

Через це може виникнути проблема: батьківський блок має тільки рамку, а картинка виходить за його межі.

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

.parent {
  border: 1px solid red;
}

.parent img {
  float: left;
}

Щоб виправити проблему, додають спеціальний порожній div з класом clearfix після плаваючого елемента.

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

.parent {
  border: 1px solid red;
}

.parent img {
  float: left;
}

.clearfix {
  clear: both;
}

• float-елементи не впливають на висоту батьківського блоку.
• clear: both скасовує обтікання з обох сторін.
• clearfix створює невидимий елемент після float.
• Батьківський блок знову отримує правильну висоту.

.parent::after {
  content: "";
  display: block;
  clear: both;
}

.clearfix {
  clear: both;
}