Відміна обтікання за допомогою clear в CSS
Вивчаємо властивість clear, яка дозволяє скасувати обтікання float та уникнути накладання елементів.
Відміна обтікання за допомогою clear в CSS
Під час використання float може виникнути проблема: плаваючий елемент виходить за межі батьківського блока і накладається на наступні елементи.
Для вирішення цієї проблеми використовується спеціальна властивість clear.
Властивість clear
Властивість clear забороняє елементу обтікати плаваючі елементи.
- clear: left — скасовує обтікання зліва.
- clear: right — скасовує обтікання справа.
- clear: both — скасовує обтікання з обох сторін.
Найчастіше використовується значення clear: both, оскільки воно прибирає обтікання незалежно від напрямку 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;
}Використання clear: both
Властивість clear потрібно задавати тому елементу, на який не повинні впливати плаваючі елементи.
У нашому випадку clear додається другому div.
<div class="parent">
<img src="img.png" alt="">
text
</div>
<div class="parent clearfix">
text
</div>.parent {
border: 1px solid red;
}
.parent img {
float: left;
}
.clearfix {
clear: both;
}Назва clearfix є загальноприйнятою. У проєктах часто використовують саме цей клас для очищення float.
- clear прибирає вплив float на елемент.
- clear потрібно ставити після плаваючих елементів.
- clear: both використовується найчастіше.
- Клас clearfix — стандартна назва для очищення обтікання.
- №1. Створіть два блоки parent.
- №2. Додайте в перший блок картинку з float: left.
- №3. Перевірте, як картинка накладається на другий блок.
- №4. Додайте другому блоку клас clearfix.
- №5. Задайте класу clearfix властивість clear: both.
💡 Показати підказку
Якщо float-елементи накладаються на наступні блоки, додайте clear: both елементу, який повинен починатися після них.
✅ Показати відповідь
.clearfix {
clear: both;
}