Обтікання елементів з float в CSS
Розбираємо проблему накладання блоків при використанні float та як працює обтікання елементів.
Обтікання елементів з float в CSS
Коли елементу задається властивість float, він перестає враховуватися при розрахунку висоти батьківського блока.
Через це плаваючий елемент може накладатися на сусідні блоки, якщо батьківський контейнер не має достатньої висоти.
<div class="parent">
<img src="img.png" alt="">
text
</div>
<div class="parent">
text
</div>.parent {
border: 1px solid red;
}
.parent img {
float: left;
}Причина полягає в тому, що перший div не враховує висоту зображення з float.
Чому виникає проблема
Звичайні елементи займають місце в потоці документа, а float-елементи ніби переміщуються вбік і дозволяють іншому контенту обтікати їх.
Якщо батьківський блок має тільки float-елементи всередині, його висота може стати рівною нулю.
Проблема з float часто зустрічається у старих макетах. Для сучасної верстки зазвичай використовують flexbox або CSS Grid.
- float-елементи можуть випадати з розрахунку висоти батька.
- Сусідні блоки можуть накладатися на плаваючі елементи.
- Проблема залежить від кількості контенту всередині блока.
- Для керування поведінкою float використовують очищення float.
- №1. Створіть два div з однаковим класом.
- №2. Додайте в перший div зображення.
- №3. Встановіть для зображення float: left.
- №4. Перевірте, як картинка впливає на другий блок.
💡 Показати підказку
Якщо float-елемент накладається на сусідні блоки, перевірте висоту батьківського контейнера та способи очищення float.