я не буду объяснять, как здесь работают поплавки (подробно), так как этот вопрос обычно фокусируется на зачем использовать 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 ' ы будет оказывать один за другим, если они не плавали
2. div будет смещаться рядом друг с другом, если плавал влево или вправо

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

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

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

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

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

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

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

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

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

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

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

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

1. div плавал влево, в результате чего section переезд в остальных космос!--73-->
2. сплавлялись div снят так что section тег будет отображаться ниже floated 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; свойство, которое мы используем для этого тоже. Теперь почему?--48--> и content из этой области ответов, но вы можете узнать больше о псевдо элемент здесь.

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

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

большинство разработчиков плавают свой контент влево или вправо на своих страницах, вероятно, divs держит логотип, боковую панель, контент и т. д., эти 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
----------------------------------