Висота батьківського елемента з float в CSS

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

Висота батьківського елемента з float в CSS

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

Але ми можемо примусово задати висоту батьківському елементу за допомогою властивості height.

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

div {
  height: 100px;
  border: 1px solid red;
}

img {
  float: right;
}

У цьому випадку висота контейнера вже не залежить від висоти картинки, оскільки ми задали її вручну.

❗ Важливо:

Використання height для батька з float підходить тільки тоді, коли відома точна висота блоку. Якщо контент може змінюватися, краще використовувати інші способи очищення float.

Проблема фіксованої висоти

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

div {
  height: 50px;
  border: 1px solid red;
}

img {
  float: right;
  height: 100px;
}

float-елементи не впливають на висоту батька.
height дозволяє вручну задати висоту контейнера.
Фіксована висота може створити проблеми з адаптивністю.
У сучасній верстці частіше використовують flex або grid.

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

📌 Завдання:

№1. Створіть div із зображенням всередині.
№2. Додайте зображенню float: right.
№3. Додайте батьківському div height: 100px.
№4. Змініть висоту картинки та подивіться результат.

💡 Показати підказку

height змушує контейнер мати заданий розмір, але не змушує його автоматично рахувати висоту float-елементів.