Как удалить浮动 (Clearfix)

Учимся, как использовать технику clearfix для удаления浮动.

Техника clearfix

Если элемент выше, чем его контейнер, и он парящий, он выйдет за пределы своего контейнера.

Затем, мы можем добавить overflow: auto; к элементам-включателям, чтобы решить эту проблему:

Пример

.clearfix {
  overflow: auto;
}

Попробуйте сами

Достаточно, чтобы вы могли контролировать внешние и внутренние поля margins и paddings;overflow: auto; эффект清除浮动非常好（в противном случае, вы можете увидеть полосу прокрутки).

Однако, новые, современные техники clearfix более безопасны в использовании, и большинство веб-страниц используют следующий код:

Пример

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Попробуйте сами

Связанные страницы

Учебник:CSS floating