Ответ 1

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

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

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

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

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

Живой пример демонстрационного образа.

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

/*  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>

Ответ 2

Свойство clear указывает, что левая, правая или обе стороны элемента не могут быть смежными с более ранними плавающими элементами внутри тот же контекст форматирования блока. Очищенные элементы проталкиваются ниже соответствующих плавающих элементов. Примеры:

clear: none; Элемент остается рядом с плавающими элементами

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-none {
  clear: none;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-none">clear: none;</div>

Ответ 3

CSS float и clear

Пример скрипта

Просто попробуйте удалить свойство clear:both из div с помощью class sample и посмотреть, как он следует за плавающей точкой divs.

Ответ 4

г. Чужой ответ прекрасен, но в любом случае я не рекомендую использовать <div class="clear"></div>, потому что это просто хак, который делает вашу разметку грязной. Это бесполезно пустым div с точки зрения плохой структуры и семантики, это также делает ваш код негибким. В некоторых браузерах этот div вызывает дополнительную высоту, и вам нужно добавить height: 0;, что еще хуже. Но реальные проблемы начинаются, когда вы хотите добавить фон или границу вокруг своих плавающих элементов - он просто рухнет, потому что сеть была плохо спроектирована. Я рекомендую обернуть флотируемые элементы в контейнер, который имеет clearfix правило CSS. Это взломать также, но красиво, более гибко использовать и читать для человеческих и SEO-роботов.

Ответ 5

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

Если вы плаваете контент, вы можете плавать влево или вправо... так что в общем макете у вас может быть левый nav, div div и нижний колонтитул.

Чтобы нижний колонтитул находился ниже обоих этих поплавков (если вы поплыли влево и вправо), вы помещаете нижний колонтитул как clear: both.

Таким образом, он останется ниже обоих поплавков.

(Если вы только очищаете левый, вам действительно нужно только clear: left;.)

Пройдите этот учебник: