Когда вы используете CSS floatи хотите следующий элемент ниже, а не справа или слева.
Риз
Не допускается использование плавающих элементов слева и справа от указанного элемента, когда элемент используется с clear: both
JackXu
Ответы:
687
Я не буду объяснять, как здесь работают поплавки (подробно), так как этот вопрос обычно фокусируется на том, зачем использовать 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--><divclass="clear"></div><footer>
Footer
</footer>
Примечание: Вы , возможно , придется добавить header, footer, aside, section(и другие элементы HTML5) , как display: block;в таблице стилей для явного упоминания о том , что элементы являются элементами уровня блока.
Объяснение:
У меня есть базовый макет, 1 заголовок, 1 боковая панель, 1 область содержимого и 1 нижний колонтитул.
Не плавает header, затем идет asideтег, который я буду использовать для боковой панели моего сайта, поэтому я буду перемещать элемент влево.
Примечание. По умолчанию элемент уровня блока занимает 100% ширины документа, но при перемещении влево или вправо его размер изменяется в соответствии с содержимым, которое он содержит.
Так что, как вы заметили, левый с плавающей точкой divоставляет пространство справа от него неиспользованным, что позволит divпоследующему смещаться в оставшееся пространство.
Итак, вот как ведут себя элементы уровня блока при перемещении влево или вправо, так что теперь, почему это clear: both;необходимо и почему?
Так что, если вы заметили в макете демо - на случай, если вы забыли, вот оно ..
Я использую класс с именем, .clearи он содержит свойство, вызванное clearсо значением both. Итак, давайте посмотрим, зачем это нужно both.
Я плавал asideи sectionэлементы слева, поэтому предположим сценарий, где у нас есть бассейн, где headerсплошная земля, asideи sectionплавающие в бассейне, а нижний колонтитул снова сплошная земля, что-то вроде этого ..
Таким образом, голубая вода понятия не имеет, какова площадь всплывающих элементов, они могут быть больше пула или меньше, поэтому возникает общая проблема, которая беспокоит 90% новичков CSS: почему фон элемента контейнера не растянут когда он содержит плавающие элементы. Это потому, что контейнерный элемент здесь - это POOL, а POOL не знает, сколько объектов плавает, или какова длина или ширина перемещаемых элементов, поэтому он просто не растянется.
(Обратитесь к разделу [Clearfix] этого ответа, чтобы узнать, как это сделать. Я divнамеренно использую пустой пример для пояснения)
Выше я предоставил 3 примера, 1-й - это нормальный поток документов, в котором redфон будет отображаться так, как ожидалось, поскольку контейнер не содержит плавающих объектов.
Во втором примере, когда объект перемещается влево, элемент контейнера (POOL) не будет знать размеры всплывающих элементов и, следовательно, не будет вытягиваться до высоты всплывающих элементов.
После использования clear: both;элемент контейнера будет растянут до размеров его плавающего элемента.
Другая причина, по которой clear: both;это используется, - предотвращение смещения элемента вверх в оставшемся пространстве.
Скажем, вы хотите, чтобы 2 элемента располагались рядом, а другой элемент под ними ... Таким образом, вы поместите 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выходит за рамки этого ответа, но вы можете узнать больше о псевдоэлементе здесь .
Большинство разработчиков размещают свой контент влево или вправо на своих страницах, вероятно, div, содержащие логотип, боковую панель, контент и т. Д., Эти div перемещаются влево или вправо, оставляя оставшееся пространство неиспользованным, и, следовательно, если вы разместите другие контейнеры, это будет float тоже в оставшемся пространстве, поэтому, чтобы предотвратить это clear: both;, он очищает все элементы, плавающие влево или вправо.
Демонстрация:
----------------------------------------------------
div1(FloatedLeft)Other div takes up the space here
----------------------------------------------------
Теперь, что если вы захотите сделать другой div-рендеринг ниже div1, то вы будете использовать clear: both;его так, чтобы он очищал все поплавки, левый или правый
------------------
div1(FloatedLeft)------------------<div style="clear: both;"><!--This<div> acts as a separator--></div>----------------------------------Other div renders here now
----------------------------------
Если вы никогда не слышали о поплавках, советую сначала прочитать введение в поплавки, например, см. Ссылку в следующем ответе. Тогда вернитесь и прочитайте этот ответ - это будет иметь смысл.
Ос
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; Элемент остается смежным с плавающими элементами
Превосходно. Это лучший ответ. Интересно, почему был принят другой ответ?
Sawa
Что произойдет, если мы удалим display: inline-block;свойство css из этого сценария? Он будет растягивать inline-blockродительский элемент до его родственного элемента, который имеет класс float-left. Из-за этого выражение «clear не влияет на значения с плавающей точкой вне текущего контекста форматирования блока» неверно. Может кто-нибудь объяснить, пожалуйста?
Сашрика Вайдьяратна
@SashrikaWaidyarathna: родительский элемент не обязательно генерирует контекст форматирования блока для своих дочерних элементов . В вашем примере (а) удаление display: inline-blockозначает, что он больше не генерирует контекст форматирования блока; (б) плавающие / очищаемые элементы внутри этого элемента и первый плавающий элемент становятся частью одного контекста форматирования блока (область просмотра).
Салман А
@SalmanA, спасибо за объяснение со ссылкой на спецификацию css. Я не знал об определении контекста форматирования блока.
Ответ г-на Чужого идеален, но в любом случае я не рекомендую его использовать, <div class="clear"></div>потому что это просто хак, который делает вашу разметку грязной. Это бесполезно пусто divс точки зрения плохой структуры и семантики, это также делает ваш код не гибким. В некоторых браузерах этот div вызывает дополнительную высоту, и вы должны добавить, height: 0;что еще хуже. Но настоящие проблемы начинаются, когда вы хотите добавить фон или границу вокруг ваших всплывающих элементов - они просто рухнут, потому что сеть была разработана плохо . Я рекомендую помещать плавающие элементы в контейнер, в котором есть CSS-правило clearfix . Это тоже хакерский, но красивый, более гибкий в использовании и читаемый для людей и SEO-роботов.
Когда вы хотите, чтобы один элемент размещался внизу другого элемента, вы используете этот код в CSS. Используется для поплавков.
Если вы перемещаете контент, вы можете перемещаться влево или вправо ... так что в обычном макете у вас могут быть навигация влево, раздел содержимого и нижний колонтитул.
Чтобы гарантировать, что нижний колонтитул остается ниже обоих этих поплавков (если вы плавали влево и вправо), тогда вы ставите нижний колонтитул как clear: both.
Таким образом, он останется ниже обоих поплавков.
(Если вы только убираете налево, то вам действительно нужно clear: left;.)
float
и хотите следующий элемент ниже, а не справа или слева.Ответы:
Я не буду объяснять, как здесь работают поплавки (подробно), так как этот вопрос обычно фокусируется на том, зачем использовать
clear: both;
ИЛИ, чтоclear: both;
именно делает ...Я оставлю этот ответ простым и конкретным, и графически объясню вам, почему
clear: both;
он требуется или что он делает ...Обычно дизайнеры перемещают элементы влево или вправо, что создает пустое пространство на другой стороне, которое позволяет другим элементам занимать оставшееся пространство.
Почему они плавают элементы?
Элементы плавают, когда дизайнеру нужны 2 элемента уровня блока рядом. Например, скажем, мы хотим разработать базовый веб-сайт, который имеет макет, как показано ниже ...
Живой пример демонстрационного изображения.
Код для демонстрации
Показать фрагмент кода
Примечание: Вы , возможно , придется добавить
header
,footer
,aside
,section
(и другие элементы HTML5) , какdisplay: block;
в таблице стилей для явного упоминания о том , что элементы являются элементами уровня блока.Объяснение:
У меня есть базовый макет, 1 заголовок, 1 боковая панель, 1 область содержимого и 1 нижний колонтитул.
Не плавает
header
, затем идетaside
тег, который я буду использовать для боковой панели моего сайта, поэтому я буду перемещать элемент влево.Так что, как вы заметили, левый с плавающей точкой
div
оставляет пространство справа от него неиспользованным, что позволитdiv
последующему смещаться в оставшееся пространство.div
будет отображаться один за другим, если они НЕ плаваютdiv
сместится рядом друг с другом, если плавать влево или вправоИтак, вот как ведут себя элементы уровня блока при перемещении влево или вправо, так что теперь, почему это
clear: both;
необходимо и почему?Так что, если вы заметили в макете демо - на случай, если вы забыли, вот оно ..
Я использую класс с именем,
.clear
и он содержит свойство, вызванноеclear
со значениемboth
. Итак, давайте посмотрим, зачем это нужноboth
.Я плавал
aside
иsection
элементы слева, поэтому предположим сценарий, где у нас есть бассейн, гдеheader
сплошная земля,aside
иsection
плавающие в бассейне, а нижний колонтитул снова сплошная земля, что-то вроде этого ..Таким образом, голубая вода понятия не имеет, какова площадь всплывающих элементов, они могут быть больше пула или меньше, поэтому возникает общая проблема, которая беспокоит 90% новичков CSS: почему фон элемента контейнера не растянут когда он содержит плавающие элементы. Это потому, что контейнерный элемент здесь - это POOL, а POOL не знает, сколько объектов плавает, или какова длина или ширина перемещаемых элементов, поэтому он просто не растянется.
(Обратитесь к разделу [Clearfix] этого ответа, чтобы узнать, как это сделать. Я
div
намеренно использую пустой пример для пояснения)Выше я предоставил 3 примера, 1-й - это нормальный поток документов, в котором
red
фон будет отображаться так, как ожидалось, поскольку контейнер не содержит плавающих объектов.Во втором примере, когда объект перемещается влево, элемент контейнера (POOL) не будет знать размеры всплывающих элементов и, следовательно, не будет вытягиваться до высоты всплывающих элементов.
После использования
clear: both;
элемент контейнера будет растянут до размеров его плавающего элемента.Другая причина, по которой
clear: both;
это используется, - предотвращение смещения элемента вверх в оставшемся пространстве.Скажем, вы хотите, чтобы 2 элемента располагались рядом, а другой элемент под ними ... Таким образом, вы поместите 2 элемента влево, а другой - под ними.
div
Плавающий влево, в результате чего вsection
оставшееся пространствоdiv
очищен, так чтоsection
тег будет отображаться ниже всплывающихdiv
s1-й пример
2-й пример
И последнее, но не менее важное:
footer
тег будет отображаться после плавающих элементов, так как я использовалclear
класс до объявления моихfooter
тегов, что гарантирует, что все плавающие элементы (влево / вправо) очищены до этой точки.Clearfix
Приходит к clearfix, который связан с поплавками. Как уже указывалось @Elky , способ, которым мы очищаем эти поплавки, не является чистым способом сделать это, поскольку мы используем пустой
div
элемент, для которого не предназначенdiv
элемент. Отсюда и ясность.Думайте об этом как о виртуальном элементе, который создаст для вас пустой элемент до того, как закончится ваш родительский элемент. Это самоочищает ваш элемент-обертку, содержащий плавающие элементы. Этот элемент не будет существовать в вашей DOM буквально, но сделает работу.
Чтобы самостоятельно очистить любой элемент-обертку с плавающими элементами, мы можем использовать
Обратите внимание на
:after
псевдоэлемент, который я использовал для этогоclass
. Это создаст виртуальный элемент для элемента-оболочки непосредственно перед его закрытием. Если мы посмотрим в дом, вы можете увидеть, как он отображается в дереве документов.Так что, если вы видите, он отображается после дочернего объекта
div
float, где мы очищаем float, что является ничем иным, как эквивалентом пустогоdiv
элемента соclear: both;
свойством, которое мы также используем для этого. Теперь почемуdisplay: table;
иcontent
выходит за рамки этого ответа, но вы можете узнать больше о псевдоэлементе здесь .Обратите внимание, что это также будет работать в IE8, так как IE8 поддерживает
:after
псевдо .Оригинальный ответ:
Большинство разработчиков размещают свой контент влево или вправо на своих страницах, вероятно, div, содержащие логотип, боковую панель, контент и т. Д., Эти div перемещаются влево или вправо, оставляя оставшееся пространство неиспользованным, и, следовательно, если вы разместите другие контейнеры, это будет float тоже в оставшемся пространстве, поэтому, чтобы предотвратить это
clear: both;
, он очищает все элементы, плавающие влево или вправо.Демонстрация:
Теперь, что если вы захотите сделать другой div-рендеринг ниже
div1
, то вы будете использоватьclear: both;
его так, чтобы он очищал все поплавки, левый или правыйисточник
display: inline-block
на элемент, а на родителя вы можете использоватьtext-align: left
,text-align: center
или,text-align: right
например.clear
Свойство указывает , что слева, справа или с обеих сторон элемента не может быть рядом с ранее размещенных элементов в контексте форматирования же блока. Очищенные элементы проталкиваются ниже соответствующих всплывающих элементов. Примеры:clear: none;
Элемент остается смежным с плавающими элементамиПоказать фрагмент кода
clear: left;
Элемент, помещенный ниже левого плавучего элементаПоказать фрагмент кода
clear: right;
Элемент вставлен ниже правого плавающего элементаПоказать фрагмент кода
clear: both;
Элемент толкается ниже всех плавающих элементовПоказать фрагмент кода
clear
не влияет на плавающие объекты вне текущего контекста форматирования блокаПоказать фрагмент кода
источник
display: inline-block;
свойство css из этого сценария? Он будет растягиватьinline-block
родительский элемент до его родственного элемента, который имеет классfloat-left
. Из-за этого выражение «clear не влияет на значения с плавающей точкой вне текущего контекста форматирования блока» неверно. Может кто-нибудь объяснить, пожалуйста?display: inline-block
означает, что он больше не генерирует контекст форматирования блока; (б) плавающие / очищаемые элементы внутри этого элемента и первый плавающий элемент становятся частью одного контекста форматирования блока (область просмотра).CSS плавать и ясно
Образец скрипки
Просто попробуйте удалить
clear:both
свойство изdiv
withclass
sample
и посмотрите, как оно следует плавающемуdivs
.источник
Ответ г-на Чужого идеален, но в любом случае я не рекомендую его использовать,
<div class="clear"></div>
потому что это просто хак, который делает вашу разметку грязной. Это бесполезно пустоdiv
с точки зрения плохой структуры и семантики, это также делает ваш код не гибким. В некоторых браузерах этот div вызывает дополнительную высоту, и вы должны добавить,height: 0;
что еще хуже. Но настоящие проблемы начинаются, когда вы хотите добавить фон или границу вокруг ваших всплывающих элементов - они просто рухнут, потому что сеть была разработана плохо . Я рекомендую помещать плавающие элементы в контейнер, в котором есть CSS-правило clearfix . Это тоже хакерский, но красивый, более гибкий в использовании и читаемый для людей и SEO-роботов.источник
clearfix
: stackoverflow.com/questions/211383/…Когда вы хотите, чтобы один элемент размещался внизу другого элемента, вы используете этот код в CSS. Используется для поплавков.
Если вы перемещаете контент, вы можете перемещаться влево или вправо ... так что в обычном макете у вас могут быть навигация влево, раздел содержимого и нижний колонтитул.
Чтобы гарантировать, что нижний колонтитул остается ниже обоих этих поплавков (если вы плавали влево и вправо), тогда вы ставите нижний колонтитул как
clear: both
.Таким образом, он останется ниже обоих поплавков.
(Если вы только убираете налево, то вам действительно нужно
clear: left;
.)Пройдите этот урок:
источник