Вплив float на батьківський елемент у CSS

Вплив float на батьківський елемент у CSS

Плаваючі елементи мають особливість: вони можуть випадати з розрахунку висоти свого батьківського елемента.

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

Картинка без float

Спочатку створимо контейнер div із зображенням без використання float.

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

div {
  border: 1px solid red;
}

Картинка з float: left

Тепер додамо зображенню float зі значенням left.

img {
  float: left;
}

Чому це відбувається

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

• Звичайний елемент збільшує висоту батька.
• Елемент із float не впливає на висоту батьківського контейнера.
• Батьківський блок може стати порожнім з точки зору висоти.

Картинка з float: right

Якщо замість left використати right, поведінка батьківського елемента залишиться такою ж.

img {
  float: right;
}

Як виправити проблему

Щоб батьківський блок знову враховував висоту float-елементів, використовують спеціальні методи очищення float.

• clear: both — очищення обтікання.
• Створення псевдоелемента ::after.
• Використання overflow: hidden або overflow: auto.
• Сучасний спосіб — Flexbox або Grid.

Практичне завдання