Методи очищення CSS
Чому в CSS потрібне clear (очищення)?
Коли ви використовуєте float на елементі (наприклад, float: left), він виходить з нормального потоку документа. Це може призвести до того, що батьківський елемент, який містить лише плаваючі елементи, завалюється по висоті.
Щоб батьківський елемент "помітив" такі дочірні елементи, вам потрібно очистити float (очищення).
Основні методи очищення float
Властивість clear
Додається до елемента після плаваючих.
<div class="clearfix"></div>.clearfix {
clear: both;
}Це працює, але вимагає додавання додаткового HTML, що не завжди зручно.
Техніка Clearfix (псевдо-елемент)
Найбільш популярний і універсальний метод.
.clearfix::after {
content: "";
display: table;
clear: both;
}Застосовується до батьківського елемента, що містить плаваючі дочірні блоки.
<div class="container clearfix">
<div class="left-box" style="float: left;"></div>
<div class="right-box" style="float: right;"></div>
</div>Уникає додавання зайвого розмітки та автоматично очищає float.
Використання "overflow: hidden"
.container {
overflow: hidden;
}- Працює, оскільки
overflowстворює новий контекст форматування блоку (BFC), який включає плаваючі елементи у розрахунок висоти. - Недолік: може обрізати вміст з
position: absoluteабо блоки, що виходять за межі кордонів.
Сучасні альтернативи — Flexbox і Grid
Якщо ви використовуєте display: flex або display: grid, очищення взагалі не потрібне, оскільки елементи залишаються в потоці і не призводять до завалювання батьківського елемента.
.container {
display: flex;
}Краще використовувати їх замість float, коли це можливо.
Важливо!:
Не плутайте clear і clearfix. - clear — це властивість, - clearfix — це техніка, що використовує clear всередині псевдо-елемента.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.