Властивість float і батьківський блок без тексту в CSS

Властивість float і батьківський блок без тексту в CSS

Якщо батьківський блок містить тільки дочірні елементи з float, він може втратити свою висоту.

Це відбувається тому, що плаваючі елементи випадають зі звичайного потоку документа і батьківський елемент їх більше не враховує.

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
</div>

.parent {
  width: 500px;
  border: 1px solid red;
  text-align: justify;
}

.child {
  width: 200px;
  height: 100px;
  border: 1px solid green;
}

.child {
  float: left;
  width: 200px;
  height: 100px;
  border: 1px solid green;
}

Така поведінка вже знайома: float-елементи не впливають на висоту свого батьківського блоку.

Вирішення за допомогою clearfix

Щоб повернути батьківському елементу правильну висоту, додаємо після float-елементів порожній блок з clear: both.

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="clearfix"></div>
</div>

.parent {
  width: 500px;
  border: 1px solid red;
  text-align: justify;
}

.child {
  float: left;
  width: 200px;
  height: 100px;
  border: 1px solid green;
}

.clearfix {
  clear: both;
}

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

.clearfix {
  clear: both;
}