Что делает правило CSS «ясно: оба»?

293

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

.clear { clear: both; }

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

Питер Мортенсен
источник
22
Когда вы используете CSS floatи хотите следующий элемент ниже, а не справа или слева.
Риз
Не допускается использование плавающих элементов слева и справа от указанного элемента, когда элемент используется с clear: both
JackXu

Ответы:

687

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

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

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

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

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

введите описание изображения здесь

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

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

Примечание: Вы , возможно , придется добавить 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. Это создаст виртуальный элемент для элемента-оболочки непосредственно перед его закрытием. Если мы посмотрим в дом, вы можете увидеть, как он отображается в дереве документов.

Clearfix

Так что, если вы видите, он отображается после дочернего объекта 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
----------------------------------
Мистер инопланетянин
источник
3
Если вы никогда не слышали о поплавках, советую сначала прочитать введение в поплавки, например, см. Ссылку в следующем ответе. Тогда вернитесь и прочитайте этот ответ - это будет иметь смысл.
Ос
37
Обратите внимание, что поплавки изначально не были изобретены, чтобы иметь два элемента уровня блока рядом, это всего лишь побочный эффект! Первоначальная цель состояла в том, чтобы позволить тексту обтекать изображения встроенными, чтобы вы перемещали изображения в любом направлении.
Призрак Мадары
3
Короткий ответ по теме, с которым можно ознакомиться, прежде чем читать это, просто чтобы получить общее представление ... stackoverflow.com/questions/16568272/…
Mr. Alien
@ MR-инопланетянин Хороший пример, однако в случае jsfiddle.net/N82UD/1 при усадке экрана, есть проблема с поплавком и «очищается» элемент не следует потока: jsfiddle.net/N82UD/138 Это берет на себя плавающий предмет 2
Омар
1
@Carlo: альтернатива, которая часто используется в таких шаблонах, как Twitter Bootstrap, например; это поставить display: inline-blockна элемент, а на родителя вы можете использовать text-align: left, text-align: centerили, text-align: rightнапример.
Даан
39

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

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

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

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

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

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

Салман А
источник
1
Превосходно. Это лучший ответ. Интересно, почему был принят другой ответ?
Sawa
Что произойдет, если мы удалим display: inline-block;свойство css из этого сценария? Он будет растягивать inline-blockродительский элемент до его родственного элемента, который имеет класс float-left. Из-за этого выражение «clear не влияет на значения с плавающей точкой вне текущего контекста форматирования блока» неверно. Может кто-нибудь объяснить, пожалуйста?
Сашрика Вайдьяратна
@SashrikaWaidyarathna: родительский элемент не обязательно генерирует контекст форматирования блока для своих дочерних элементов . В вашем примере (а) удаление display: inline-blockозначает, что он больше не генерирует контекст форматирования блока; (б) плавающие / очищаемые элементы внутри этого элемента и первый плавающий элемент становятся частью одного контекста форматирования блока (область просмотра).
Салман А
@SalmanA, спасибо за объяснение со ссылкой на спецификацию css. Я не знал об определении контекста форматирования блока.
Сашрика Вайдьяратна
2
Сундар Пичаи, двойник?
Манодж Кумар
13

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

ElkY
источник
Этот другой пост содержит более подробную информацию о clearfix: stackoverflow.com/questions/211383/…
Билл Хоаг,
2

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

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

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

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

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

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

Saeed
источник
3
Какой учебник?
Питер Мортенсен