clear
Свойство clear CSS указывает, может ли элемент быть рядом с плавающими floating элементами, которые предшествуют ему или должны быть перемещены вниз (очищены) под ними. Свойство clear применяется как к плавающим, так и к неплавающим элементам.
Интерактивный пример
При применении к неплавающим блокам он перемещает границу края border edge (en-US) элемента до тех пор, пока не окажется ниже края margin edge (en-US) поля всех соответствующих поплавков. Вертикальный край неплавающего блока сжимается.
Вертикальные поля между двумя плавающими элементами, с другой стороны, не будут разрушаться. При применении к плавающим элементам — margin edge (en-US) нижнего элемента перемещается ниже margin edge (en-US) всех соответствующих поплавков. Это влияет на положение более поздних поплавков, поскольку более поздние поплавки не могут быть расположены выше предыдущих.
Поплавки, которые имеют отношение к очистке, — это более ранние поплавки в одном и том же контексте форматирования блоков (en-US) .
Примечание: Если элемент содержит только плавающие элементы, его высота сворачивается в ничто. Если вы хотите, чтобы он всегда мог изменять размер, чтобы он содержал в себе плавающие элементы, вам нужно самоочистить своих детей. Это называется clearfix, и один из способов сделать это — это заменит clear заменённый ::after псевдоэлемент на нем.«`css #container::after
Синтаксис
/* Значения ключевых слов */ clear: none; clear: left; clear: right; clear: both; clear: inline-start; clear: inline-end; /* Global values */ clear: inherit; clear: initial; clear: unset;
Значения
Является ключевым словом, указывающим, что элемент не перемещается вниз, чтобы очистить предыдущие плавающие элементы.
Является ключевым словом, указывающим, что элемент перемещается вниз, чтобы очистить левые поплавки.
Является ключевым словом, указывающим, что элемент перемещается вниз, чтобы удалить прошлые правые поплавки.
Это ключевое слово, указывающее, что элемент перемещается вниз, чтобы очистить как левые, так и правые поплавки.
Является ключевым словом, указывающим, что элемент перемещается вниз для очистки поплавков в начале содержащего его блока, то есть левые поплавки на скриптах ltr и правые поплавки на скриптах rtl.
Является ключевым словом, указывающим, что элемент перемещается вниз для очистки поплавков в конце содержащего его блока, то есть правые поплавки на скриптах ltr и левые поплавки на скриптах rtl.
Формальный синтаксис
clear =
inline-start | (en-US)
inline-end | (en-US)
block-start | (en-US)
block-end | (en-US)
left | (en-US)
right | (en-US)
top | (en-US)
bottom | (en-US)
none
Примеры
clear: left
HTML
div class="wrapper"> p class="black">Давай лучше "бёзди хэппи" затянем, нежели Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.p> p class="red">Пусть бегут неуклюже пешеходы по лужам, Lorem ipsum dolor sit amet, consectetuer adipiscing elit.p> p class="left">Этот абзац очищается слева.p> div>
CSS
.wrapper border:1px solid black; padding:10px; > .left border: 1px solid black; clear: left; > .black float: left; margin: 0; background-color: black; color: #fff; width: 20%; > .red float: left; margin: 0; background-color: pink; width:20%; > p width: 50%; > clear: right
HTML
div class="wrapper"> p class="black">Лучше нести бред и околесицу, но более осмысленную, чем Lorem ipsum dolor sit amet, consectetuer adipiscing elit.p> p class="red">- Так я ж намедни намекал, что Lorem ipsum dolor sit amet, consectetuer adipiscing elit.p> p class="right">Этот абзац очищается справа.p> div>
CSS
.wrapper border:1px solid black; padding:10px; > .right border: 1px solid black; clear: right; > .black float: right; margin: 0; background-color: black; color: #fff; width:20%; > .red float: right; margin: 0; background-color: pink; width:20%; > p width: 50%; > clear: both
HTML
div class="wrapper"> p class="black">Лучше нести осмысленную белиберду, чем "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.p> p class="red">Вот я и говорю, что "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor".p> p class="both">Этот абзац очищает оба.p> div>
CSS
.wrapper border:1px solid black; padding:10px; > .both border: 1px solid black; clear: both; > .black float: left; margin: 0; background-color: black; color: #fff; width:20%; > .red float: right; margin: 0; background-color: pink; width:20%; > p width: 45%; > Характеристики
| Спецификация | Статус | Коммент |
|---|---|---|
| CSS Logical Properties and Values Level 1 Определение ‘float and clear’ в этой спецификации. | Редакторский черновик | Добавляет значения inline-start и inline-end . |
| CSS Level 2 (Revision 1) Определение ‘clear’ в этой спецификации. | Рекомендация | Никаких существенных изменений, хотя детали уточняются. |
| CSS Level 1 Определение ‘clear’ в этой спецификации. | Рекомендация | Начальное определение |
| Начальное значение | none |
|---|---|
| Применяется к | блочные элементы |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | discrete |
Совместимость с браузером
BCD tables only load in the browser
Смотрите также
Found a content problem with this page?
This page was last modified on 11 февр. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.