Как сделать - Очистить поплавки (Clearfix)
Узнайте, как очищать поплавки с помощью хака «clearfix».
Как очистить поплавки (Clearfix)
Элементы после плавающего элемента будут обтекать его. Используйте хак «clearfix», чтобы решить проблему:
Без Клирфикс
С Клирфикс
Взлом Clearfix
Если элемент выше, чем элемент, содержащий его, и он плавает, он переполнится за пределы своего контейнера.
Затем мы можем добавить overflow: auto;
к содержащему элементу, чтобы решить эту проблему:
Пример
.clearfix {
overflow: auto;
}
The overflow:auto clearfix works well as long as you are able to keep control of your margins and padding (else you might see scrollbars). The new, modern clearfix hack however, is safer to use, and the following code is used for most webpages:
Example
.clearfix::after {
content: "";
clear: both;
display: table;
}
Tip: Learn more about floats in our CSS Float Tutorial.