Текст у батьківському елементі з float в CSS

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

Текст у батьківському елементі з float в CSS

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

Але елементи з властивістю float не враховуються при розрахунку висоти батьківського контейнера.

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

div {
  border: 1px solid red;
}

img {
  float: right;
}

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

img {
  float: left;
}

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

<div>
  text
</div>

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

div {
  text-align: justify;
  border: 1px solid red;
}

img {
  float: left;
}

❗ Важливо:

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

float-елементи не збільшують висоту батьківського блока.
Висота контейнера залежить тільки від звичайного потоку документа.
Мала кількість тексту може призвести до накладання елементів.
Для сучасної верстки частіше використовують flex або grid.

📌 Завдання:

№1. Створіть div із текстом та зображенням.
№2. Додайте картинці float: left.
№3. Додайте після блоку ще один div.
№4. Перевірте, коли зображення починає накладатися на сусідній блок.

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

Проблема виникає тому, що float-властивість прибирає елемент із нормального розрахунку висоти батьківського контейнера.