Что делает следующее правило CSS:

.clear { clear: both; }

И зачем нам это использовать?

Я не буду объяснять, как здесь работают поплавки (подробно), так как этот вопрос обычно фокусируется на том, зачем использовать 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: почему фон элемента контейнера не растянут когда он содержит плавающие элементы. Это потому, что контейнерный элемент здесь - это POOL, а POOL не знает, сколько объектов плавает, или какова длина или ширина перемещаемых элементов, поэтому он просто не растянется.

1. Нормальный поток документа
2. Разделы с плавающей слева
3. Очищенные плавающие элементы, чтобы растянуть цвет фона контейнера

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

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

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

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

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

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

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

1-й пример

2-й пример

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

Clearfix

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

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

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

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

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

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

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

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

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

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>

clear: left; Элемент, помещенный ниже левого плавучего элемента

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

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

clear: right; Элемент вставлен ниже правого плавающего элемента

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

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

clear: both; Элемент толкается ниже всех плавающих элементов

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-both {
  clear: both;
  background: #FFF;
}

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

clear не влияет на плавающие объекты вне текущего контекста форматирования блока

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.inline-block {
  display: inline-block;
  background: #BDF;
}
.inline-block .float-left {
  height: 60px;
}
.clear-both {
  clear: both;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="inline-block">
  <div>display: inline-block;</div>
  <div class="float-left">float: left;</div>
  <div class="clear-both">clear: both;</div>
</div>

CSS плавать и ясно

Образец скрипки

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

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

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

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

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

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

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

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