Как сделать - Clearfix
Узнайте, как очистить плавает с "clearfix" Hack.
Как очистить поплавки (Clearfix)
Элементы после плавающего элемента будет течь вокруг него. Используйте "clearfix" рубить, чтобы решить проблему:
Without Clearfix
With Clearfix
Clearfix Hack
Если элемент выше, чем элемент, содержащий его, и он плавает, он будет переполнения за пределами своего контейнера.
Затем мы можем добавить overflow: auto;
к содержащей элемент для решения этой проблемы:
Пример
.clearfix {
overflow: auto;
}
Переполнение: Auto clearfix работает хорошо, пока вы в состоянии держать контроль над полями и обивка (иначе вы можете увидеть полосы прокрутки). новый, современный clearfix Hack тем не менее, является более безопасным в использовании, и следующий код используется для большинства веб-страниц:
Пример
.clearfix::after {
content: "";
clear: both;
display: table;
}
Совет: Узнайте больше о поплавках в нашем учебнике по CSS float.