я не буду объяснять, как поплавки работают здесь (подробно), так как этот вопрос обычно фокусируется на зачем использовать clear: both; и что значит clear: both; именно...

я буду держать этот ответ простым и по существу, и объясню вам графически, почему clear: both; требуется или что он делает...

обычно дизайнеры плавают элементы, слева или справа, что создает пустое пространство на другой стороне, что позволяет другим элементам занять оставшееся пространство.

почему они плавают элементов?

элементы плавают, когда дизайнеру нужно 2 элемента уровня блока бок о бок. Например, скажем, мы хотим создать базовый веб-сайт, который имеет макет, как показано ниже...

Видео демо-изображения.

Код Для Демо

/*  CSS:  */

* { /* Not related to floats / clear both, used it for demo purpose only */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

header, footer {
    border: 5px solid #000;
    height: 100px;
}

aside {
    float: left;
    width: 30%;
    border: 5px solid #000;
    height: 300px;
}

section {
    float: left;
    width: 70%;
    border: 5px solid #000;
    height: 300px;
}

.clear {
    clear: both;
}

<!-- HTML -->
<header>
    Header
</header>
<aside>
    Aside (Floated Left)
</aside>
<section>
    Content (Floated Left, Can Be Floated To Right As Well)
</section>
<!-- Clearing Floating Elements-->
<div class="clear"></div>
<footer>
    Footer
</footer>

Примечание: возможно, вам придется добавить header,footer,aside,section (и другие элементы HTML5) как display: block; в вашей таблице стилей для явного упоминания о том, что элементы являются элементами уровня блока.

объяснение:

у меня есть основной макет, 1 Заголовок, 1 боковая панель, 1 область содержимого и 1 нижний колонтитул.

нет терки для header, далее идет aside тег, который я буду использовать для моего сайта боковой панели, так что я буду плавать элемент оставил.

примечание: по умолчанию, элемент уровня блока занимает документ 100% ширина, но когда плавал влево или вправо, он будет изменять размер в соответствии с содержание он держит.

1. Нормальное Поведение Элемента Уровня Блока
2. Плавающее Поведение Элемента Уровня Блока

Итак, как вы заметили, левый плавал div оставляет пространство справа неиспользуемым, что позволит div после этого переместиться в оставшееся пространство.

1. div ' S будет отображаться один за другим, если они не плавали
2. div будет смещаться рядом друг с другом, если плавали влево или вправо

ок, Так вот как ведут себя элементы уровня блока, когда плавают влево или вправо, так почему теперь clear: both; требуются и почему?

так что если вы заметите в макете демо-в случае, если вы забыли, здесь это..

я использую класс под названием .clear и он содержит свойство с именем clear стоимостью both. Так давайте посмотрим, почему это нужно both.

я поплыл aside и section элементы слева, поэтому предположим сценарий, где у нас есть пул, где header твердая земля, aside и section плавают в бассейне и подвал снова твердая земля, что-то вроде этот..

таким образом, голубая вода понятия не имеет, какова площадь плавающих элементов, они могут быть больше, чем бассейн или меньше, поэтому здесь возникает общая проблема, которая беспокоит 90% начинающих CSS: почему фон элемента контейнера не растягивается, когда он держит плавающие элементы. Это потому, что элемент контейнера является бассейн здесь бассейн не имеет ни малейшего представления, сколько объектов плавают, или какой длины или ширина плавающих элементов есть, поэтому она просто не будет растягиваться.

1. Нормальный Поток Документа
2. Секции Поплыли Влево
3. Очищенные Плавающие Элементы Растягивают Цвет Фона Контейнера

(см. ^[Clearfix] раздел этого ответа для аккуратного способа сделать это. Я использую пустой div пример намеренно для объяснения цель)

я привел 3 примера выше, 1-й-это нормальный документооборот, где red фон будет отображаться так, как ожидалось, так как контейнер не содержит плавающих объектов.

во втором примере, когда объект перемещается влево, элемент контейнера (пул) не будет знать размеры перемещаемых элементов и, следовательно, он не будет растягиваться до высоты перемещаемых элементов.

после использования clear: both;, в элемент контейнера будет растянут до его размеров плавающего элемента.

другая причина clear: both; используется для предотвращения смещения элемента вверх в оставшемся пространстве.

скажем, вы хотите 2 элемента бок о бок и еще один элемент под ними... Таким образом, вы будете плавать 2 элемента влево, и вы хотите, чтобы другие ниже их.

1. div плавал слева в результате section переход в остальные космос
2. сплавлялись div снят так что section тег будет отображаться ниже сплавлялись divs

---

Пример 1

---

Пример 2

и последнее, но не менее важное,footer тег будет отображаться после плавающих элементов, как я использовал clear класс перед объявлением мой footer Теги, что гарантирует, что все плавающие элементы (слева/справа) очищаются до этого момента.

---

Clearfix

переход к clearfix, который связан с поплавками. Как уже указано @Elky, то, как мы очищаем эти поплавки, не является чистым способом сделать это, поскольку мы используем пустой div элемент, который является не div элемент предназначен для. Следовательно, здесь идет clearfix.

думайте об этом как о виртуальном элементе, который создаст пустой элемент для вас прежде чем ваш родительский элемент закончится. Это позволит самостоятельно очистить ваш элемент обертки, удерживающий плавающие элементы. Этот элемент не будет существовать в вашем DOM буквально, но будет делать свою работу.

чтобы самостоятельно очистить любой элемент обертки, имеющий плавающие элементы, мы можем использовать

.wrapper_having_floated_elements:after {  /* Imaginary class name */
  content: "";
  clear: both;
  display: table;
}

Примечание :after псевдо элемент, используемый мной для этого class. Это создаст виртуальный элемент для элемента-оболочки непосредственно перед его закрытием. Если мы посмотрим в dom, вы можете увидеть, как это проявляется в Дерево документа.

так что если вы видите, он отображается после плавающего ребенка div где мы очищаем поплавки, которые не что иное, как эквивалент пустого div элемент clear: both; свойство, которое мы используем для этого тоже. Теперь почему display: table; и content находится вне этой области ответов, но вы можете узнать больше о псевдо элемент здесь.

обратите внимание, что это также будет работать в IE8, как IE8 поддерживает :after псевдо.

---

Оригинальный Ответ:

большинство разработчиков размещают свой контент слева или справа на своих страницах, вероятно, divs держит логотип, боковую панель, контент и т. д., эти дивы плавают влево или вправо, оставляя остальную часть пространства неиспользуемой и, следовательно, если вы разместите другие контейнеры, он тоже будет плавать в оставшемся пространстве, поэтому для предотвращения этого clear: both; используется, он очищает все элементы плавали влево или право.

демонстрация:

------------------ ----------------------------------
div1(Floated Left) Other div takes up the space here
------------------ ----------------------------------

теперь что, если вы хотите сделать другой div рендер ниже div1, так что вы будете использовать clear: both; так что это обеспечит вам очистить все поплавки, влево или вправо

------------------
div1(Floated Left)
------------------
<div style="clear: both;"><!--This <div> acts as a separator--></div>
----------------------------------
Other div renders here now
----------------------------------