Clear both что это

Свойство float

Свойство float в CSS занимает особенное место. До его появления расположить два блока один слева от другого можно было лишь при помощи таблиц. Но в его работе есть ряд особенностей. Поэтому его иногда не любят, но при их понимании float станет вашим верным другом и помощником.

Далее мы рассмотрим, как работает float , разберём решения сопутствующих проблем, а также ряд полезных рецептов.

Как работает float

При применении этого свойства происходит следующее:

1. Элемент позиционируется как обычно, а затем вынимается из документа потока и сдвигается влево (для left ) или вправо (для right ) до того как коснётся либо границы родителя, либо другого элемента с float .
2. Если пространства по горизонтали не хватает для того, чтобы вместить элемент, то он сдвигается вниз до тех пор, пока не начнёт помещаться.
3. Другие непозиционированные блочные элементы без float ведут себя так, как будто элемента с float нет, так как он убран из потока.
4. Строки (inline-элементы), напротив, «знают» о float и обтекают элемент по сторонам.

Элемент при наличии float получает display:block .

То есть, указав элементу, у которого display:inline свойство float: left/right , мы автоматически сделаем его блочным. В частности, для него будут работать width/height .

Исключением являются некоторые редкие display наподобие inline-table и run-in (см. Relationships between „display“, „position“, and „float“)

Ширина float -блока определяется по содержимому. («CSS 2.1, 10.3.5»).

Вертикальные отступы margin элементов с float не сливаются с отступами соседей, в отличие от обычных блочных элементов.

Это пока только теория. Далее мы рассмотрим происходящее на примере.

Текст с картинками

Одно из первых применений float , для которого это свойство когда-то было придумано – это вёрстка текста с картинками, отжатыми влево или вправо.

Например, вот страница о Винни-Пухе с картинками, которым поставлено свойство float :

Её HTML-код выглядит примерно так:

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

Посмотрим, например, как выглядело бы начало текста без float:

1. Элемент IMG вынимается из документа потока. Иначе говоря, последующие блоки начинают вести себя так, как будто его нет, и заполняют освободившееся место (изображение для наглядности полупрозрачно):

1. Элемент IMG сдвигается максимально вправо(при float:right ):

1. Строки, в отличие от блочных элементов, «чувствуют» float и уступают ему место, обтекая картинку слева:

При float:left – всё то же самое, только IMG смещается влево (или не смещается, если он и так у левого края), а строки – обтекают справа

Строки и инлайн-элементы смещаются, чтобы уступить место float . Обычные блоки – ведут себя так, как будто элемента нет.

Чтобы это увидеть, добавим параграфам фон и рамку, а также сделаем изображение немного прозрачным:

Как видно из рисунка, параграфы проходят «за» float . При этом строки в них о float’ах знают и обтекают их, поэтому соответствующая часть параграфа пуста.

Блок с float

Свойство float можно поставить любому элементу, не обязательно картинке. При этом элемент станет блочным.

Посмотрим, как это работает, на конкретной задаче – сделать рамку с названием вокруг картинки с Винни.

HTML будет такой:

…то есть, div.left-picture включает в себя картинку и заголовок к ней. Добавим стиль с float :

Заметим, что блок div.left-picture «обернул» картинку и текст под ней, а не растянулся на всю ширину. Это следствие того, что ширина блока с float определяется по содержимому.

Очистка под float

Разберём ещё одну особенность использования свойства float .

Для этого выведем персонажей из мультфильма «Винни-Пух». Цель:

Реализуем её, шаг за шагом.

Шаг 1. Добавляем информацию

Попробуем просто добавить Сову после Винни-Пуха:

Результат такого кода будет странным, но предсказуемым:

• Заголовок <h2>Сова</h2> не заметил float (он же блочный элемент) и расположился сразу после предыдущего параграфа <p>..Текст о Винни..</p> .
• После него идёт float -элемент – картинка «Сова». Он был сдвинут влево. Согласно алгоритму, он двигается до левой границы или до касания с другим float -элементом, что и произошло (картинка «Винни-Пух»).
• Так как у совы float:left , то последующий текст обтекает её справа.

Шаг 2. Свойство clear

Мы, конечно же, хотели бы расположить заголовок «Сова» и остальную информацию ниже Винни-Пуха.

Для решения возникшей проблемы придумано свойство clear .

Применение этого свойства сдвигает элемент вниз до тех пор, пока не закончатся float’ы слева/справа/с обеих сторон.

Применим его к заголовку H2 :

Результат получившегося кода будет ближе к цели, но всё ещё не идеален:

Элементы теперь в нужном порядке. Но куда пропал отступ margin-top у заголовка «Сова»?

Теперь заголовок «Сова» прилегает снизу почти вплотную к картинке, с учётом её margin-bottom , но без своего большого отступа margin-top .

Таково поведение свойства clear . Оно сдвинуло элемент h2 вниз ровно настолько, чтобы элементов float не было сбоку от его верхней границы.

Если посмотреть на элемент заголовка внимательно в инструментах разработчика, то можно заметить отступ margin-top у заголовка по-прежнему есть, но он располагается «за» элементом float и не учитывается при работе в clear .

Чтобы исправить ситуацию, можно добавить перед заголовком пустой промежуточный элемент без отступов, с единственным свойством clear:both . Тогда уже под ним отступ заголовка будет работать нормально:

30 секунд CSS

Предлагаем вашему вниманию коллекцию полезных CSS-сниппетов, в которых вы можете разобраться за 30 секунд, а то и быстрее.

Clearfix

Позволяет элементу автоматически применять clear к своим дочерним элементам.

Примечание: полезно только в том случае, если вы всё ещё используете float при создании макетов. Рассмотрите возможность перейти на более современные подходы с применением flexbox или сетки.

Пример

Объяснение

1. .clearfix::after определяет псевдоэлемент.
2. content: » позволяет псевдоэлементу влиять на макет.
3. clear: both означает, что в рамках одного блочного отформатированного контекста левая, или правая, или обе стороны элемента не могут примыкать к элементам, к которым ранее применено float.

Поддержка в браузерах

Подводных камней нет.

Постоянное соотношение ширины к высоте

Если у элемента изменяется ширина, то и высота динамически меняется пропорционально, с заданным коэффициентом (то есть отношение ширины к высоте остаётся неизменным).

Объяснение

padding-top и padding-bottom могут использоваться в качестве альтернативы height , поскольку процентное значение высоты элемента становится процентным значением ширины. То есть 50% означает, что высота элемента будет составлять 50 % от ширины. В результате соотношение сторон не меняется.

Поддержка в браузерах

padding-top смещает всё содержимое на дно элемента.

Кастомное выделение текста

Изменяет стиль выделения текста.

Пример

Объяснение

::selection определяет в элементе псевдоселектор, чтобы применять стиль к тексту, когда он выделен.

Поддержка в браузерах

Эта фича пока отсутствует в спецификациях, для её полной поддержки нужно использовать префиксы.

Переменные плавности анимации

Переменные, которые можно повторно использовать для свойств transition-timing-function , дают больше возможностей по сравнению со встроенными ease , ease-in , ease-out и ease-in-out .

Пример

Объяснение

Переменные, объявленные глобально вне псевдокласса :root CSS, которые совпадают с корневым элементом дерева документа. В HTML :root соответствует элементу и идентичен селектору html, кроме лишь того, что его специфика выше.

Поддержка в браузерах

Подводных камней нет.

Вдавленный текст

Создаёт эффект вдавленного, или выгравированного на фоне текста.

Пример

Объяснение

text-shadow: 0 2px white создаёт белую тень со смещением 0px по горизонтали и 2px по вертикали от исходной позиции. Фон должен быть темнее тени, а текст — слегка выцветшим, чтобы он выглядел вдавленным/выгравированным на фоне.

Поддержка в браузерах

Подводных камней нет.

Градиентный текст

Делает градиентную заливку текста.

Пример

Объяснение

1. background: -webkit-linear-gradient(. ) делает у текстового элемента градиентный фон.
2. webkit-text-fill-color: transparent заполняет текст прозрачным цветом.
3. webkit-background-clip: text закрепляет фон с текстом, заливает текст градиентным фоном в качестве цвета.

Поддержка в браузерах

90,7 %
️ Использует нестандартные свойства.

Тонкая рамка

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

Пример

Объяснение

1. Box-shadow при использовании спреда ( spread ) добавляет псевдорамку, которая может использовать субпиксели*.
2. Применяйте @media (min-resolution: . ) для проверки соотношения логических и физических пикселей на устройстве (device pixel ratio) ( 1ddpx эквивалентно 96 DPI), задайте спред box-shadow равным 1 / dppx .

Поддержка в браузерах

️Для полной поддержки нужен альтернативный синтаксис и проверка JavaScript юзер-агента.

Горизонтальное и вертикальное центрирование

Центрирует дочерний элемент по вертикали и горизонтали внутри родительского элемента.

Пример

Объяснение

1. display: flex включает flexbox.
2. justify-content: center центрирует дочерний элемент по горизонтали.
3. align-items: center центрирует дочерний элемент по вертикали.

Поддержка в браузерах

️Для полной поддержки нужны префиксы.

Градиентное отслеживание курсора мыши (требуется JavaScript)

При наведении курсор сопровождается градиентным эффектом.

Пример

Объяснение

1. ::before определяет псевдоэлемент
2. —size , —x , —y являются набором пользовательских CSS-свойств
3. background: radial-gradient(circle closest-side, pink, transparent); определяет градиент
4. —size: 200px; показывают градиент при наведении
5. btn.style.setProperty(‘—x’, x + ‘px’) и btn.style.setProperty(‘—y’, y + ‘px’) определяют положение блока с градиентом относительно контейнера

Примечание. Если родительский элемент позиционирован относительно содержимого ( position: relative ), то придётся также вычитать и его смещение.

Поддержка в браузерах

Градиент при избыточной прокрутке

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

Пример

Объяснение

1. position: relative применительно к родительскому элементу задаёт декартово позиционирование псевдоэлементов.
2. ::after определяет псевдоэлемент.
3. background-image: linear-gradient(. ) добавляет линейный градиент от прозрачного к белому (сверху вниз).
4. position: absolute берёт псевдоэлемент из потока документа и позиционирует его относительно родительского элемента.
5. width: 300px задаёт размер прокручиваемого элемента (дочернего по отношению к родительскому, содержащему псевдоэлемент).
6. height: 25px — это высота градиентного псевдоэлемента, она должна быть относительно небольшой.
7. bottom: 0 позиционирует псевдоэлемент по нижней границе родительского элемента.

Поддержка в браузерах

Подводных камней нет.

Выдвигающееся (popout) меню

При наведении курсора выдвигается интерактивное меню.

Пример

Объяснение

1. position: relative для референсного родительского элемента устанавливает декартово позиционирование дочернего элемента.
2. position: absolute берёт из потока документа выдвигающееся меню и позиционирует его относительно родительского элемента.
3. left: 100% целиком выводит меню слева от родительского элемента.
4. visibility: hidden изначально скрывает меню и разрешает переходы (в отличие от display: none).
5. .reference:hover > .popout-menu означает, что, когда курсор мыши проходит над .reference, немедленно выбираются дочерние элементы с классом .popout-menu, а их видимость (visibility) меняется на visible, в результате мы видим меню.

Поддержка в браузерах

Подводных камней нет.

Красивое подчёркивание текста

Более симпатичная альтернатива text-decoration: underline , когда линия не пересекает нижние выносные элементы букв. Нативно реализовано в качестве text-decoration-skip-ink: auto , но при этом у нас становится меньше возможностей управлять подчёркиванием.

Пример

Объяснение

1. text-shadow: . имеет четыре значения со сдвигами, покрывающие зону 4 × 4 пикселя, чтобы у подчёркивания была «толстая» тень, накрывающая линию в местах пересечения выносных элементов букв. Используйте цвет фона. Для крупных шрифтов задавайте зону большего размера
2. background-image: linear-gradient(. ) создаёт 90-градусный градиент текущего цвета текста (currentColor).
3. Свойства background-* задают внизу градиент размером 1 × 1 px и повторяют его по оси Х.
4. Псевдоселектор ::selection отвечает за то, чтобы тень текста не накладывалась на текстовое выделение.

Поддержка в браузерах

Для работы ::selection в Firefox необходимы префиксы

Разделитель

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

Пример

Объяснение

1. position: relative задаёт для элемента декартово позиционирование псевдоэлементов.
2. ::after задаёт псевдоэлемент.
3. background-image: url(. ) добавляет в качестве фонового изображения псевдоэлемента SVG-форму (треугольник 24 × 24 в формате base64), которая по умолчанию многократно повторяется. Она должна быть того же цвета, что и отделяемый блок.
4. position: absolute берёт псевдоэлемент из потока документа и позиционирует его относительно родительского элемента.
5. width: 100% растягивает элемент по всей ширине его родительского элемента.
6. height: 24px задаёт такую же высоту, как и у SVG-формы.
7. bottom: 0 позиционирует псевдоэлемент внизу родительского элемента.

Поддержка в браузерах

Подводных камней нет.

Стек системных шрифтов

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

Пример

Объяснение

Браузер ищет каждый из нижеперечисленных шрифтов. Если первый шрифт недоступен — ищет второй, если он тоже недоступен — ищет третий и т. д.

1. -apple-system — шрифт San Francisco, используемый в iOS и macOS (но не в Chrome).
2. BlinkMacSystemFont — шрифт San Francisco, используемый в macOS Chrome.
3. Segoe UI используется в Windows 10.
4. Roboto — в Android.
5. Oxygen-Sans — в GNU + Linux.
6. Ubuntu — в Linux.
7. «Helvetica Neue» и Helvetica — в macOS 10.10 и ниже (взят в кавычки, потому что в названии есть пробел).
8. Arial широко поддерживается всеми ОС.
9. sans-serif — запасной шрифт без засечек, используется, если все вышеперечисленные недоступны.

Поддержка в браузерах

Подводных камней нет.

Треугольник

С помощью чистого CSS создаёт треугольную форму.

Пример

Объяснение

Цвет границы — это цвет самого треугольника. Сторона, в которую обращена вершина треугольника, противоположна свойству border-* . Например, border-top означает, что «стрелка» указывает вниз.

Поэкспериментируйте со значениями px , чтобы изменить пропорции треугольника.

Поддержка в браузерах

Подводных камней нет.

Обрезание текста

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

Что делает правило CSS «clear: both»?

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

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

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

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

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

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

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

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

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

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

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

Пример 1

Пример 2

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

Clearfix

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

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

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

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

так что, если вы видите, он отображается после плавающего ребенка div где мы очищаем поплавки, которые не что иное, как эквивалент пустой div элемент clear: both; свойство, которое мы используем для этого тоже. Теперь почему?—48—> и content из этой области ответов, но вы можете узнать больше о псевдо элемент здесь.

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

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

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

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

теперь, что, если вы хотите сделать другой div рендеринг ниже div1 , так что вы будете использовать clear: both; таким образом, это обеспечит вам очистить все поплавки, влево или вправо

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

What does the CSS rule "clear: both" do?

I’ll keep this answer simple, and to the point, and will explain to you graphically why clear: both; is required or what it does.

Generally designers float the elements, left or to the right, which creates an empty space on the other side which allows other elements to take up the remaining space.

Why do they float elements?

Elements are floated when the designer needs 2 block level elements side by side. For example say we want to design a basic website which has a layout like below.

Note: You might have to add header , footer , aside , section (and other HTML5 elements) as display: block; in your stylesheet for explicitly mentioning that the elements are block level elements.

Explanation:

I have a basic layout, 1 header, 1 side bar, 1 content area and 1 footer.

No floats for header , next comes the aside tag which I’ll be using for my website sidebar, so I’ll be floating the element to left.

Note: By default, block level element takes up document 100% width, but when floated left or right, it will resize according to the content it holds.

So as you note, the left floated div leaves the space to its right unused, which will allow the div after it to shift in the remaining space.

Ok, so this is how block level elements behave when floated left or right, so now why is clear: both; required and why?

So if you note in the layout demo — in case you forgot, here it is..

I am using a class called .clear and it holds a property called clear with a value of both . So lets see why it needs both .

I’ve floated aside and section elements to the left, so assume a scenario, where we have a pool, where header is solid land, aside and section are floating in the pool and footer is solid land again, something like this..

So the blue water has no idea what the area of the floated elements are, they can be bigger than the pool or smaller, so here comes a common issue which troubles 90% of CSS beginners: why the background of a container element is not stretched when it holds floated elements. It’s because the container element is a POOL here and the POOL has no idea how many objects are floating, or what the length or breadth of the floated elements are, so it simply won’t stretch.

(Refer [Clearfix] section of this answer for neat way to do this. I am using an empty div example intentionally for explanation purpose)

I’ve provided 3 examples above, 1st is the normal document flow where red background will just render as expected since the container doesn’t hold any floated objects.

In the second example, when the object is floated to left, the container element (POOL) won’t know the dimensions of the floated elements and hence it won’t stretch to the floated elements height.

After using clear: both; , the container element will be stretched to its floated element dimensions.

Another reason the clear: both; is used is to prevent the element to shift up in the remaining space.

Say you want 2 elements side by side and another element below them. So you will float 2 elements to left and you want the other below them.

1st Example

2nd Example

Last but not the least, the footer tag will be rendered after floated elements as I’ve used the clear class before declaring my footer tags, which ensures that all the floated elements (left/right) are cleared up to that point.

Clearfix

Coming to clearfix which is related to floats. As already specified by @Elky, the way we are clearing these floats is not a clean way to do it as we are using an empty div element which is not a div element is meant for. Hence here comes the clearfix.

Think of it as a virtual element which will create an empty element for you before your parent element ends. This will self clear your wrapper element holding floated elements. This element won’t exist in your DOM literally but will do the job.

To self clear any wrapper element having floated elements, we can use

Note the :after pseudo element used by me for that class . That will create a virtual element for the wrapper element just before it closes itself. If we look in the dom you can see how it shows up in the Document tree.

So if you see, it is rendered after the floated child div where we clear the floats which is nothing but equivalent to have an empty div element with clear: both; property which we are using for this too. Now why display: table; and content is out of this answers scope but you can learn more about pseudo element here.

Note that this will also work in IE8 as IE8 supports :after pseudo.

Original Answer:

Most of the developers float their content left or right on their pages, probably divs holding logo, sidebar, content etc., these divs are floated left or right, leaving the rest of the space unused and hence if you place other containers, it will float too in the remaining space, so in order to prevent that clear: both; is used, it clears all the elements floated left or right.

Demonstration:

Now what if you want to make the other div render below div1 , so you’ll use clear: both; so it will ensure you clear all floats, left or right