Свойство clear CSS указывает, может ли элемент быть рядом с плавающими  floating элементами, которые предшествуют ему или должны быть перемещены вниз (очищены) под ними. Свойство clear применяется как к плавающим, так и к неплавающим элементам.

При применении к неплавающим блокам он перемещает границу края border edge элемента до тех пор, пока не окажется ниже края margin edge поля всех соответствующих поплавков. Вертикальный край неплавающего блока сжимается.

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

Поплавки, которые имеют отношение к очистке, - это более ранние поплавки в одном и том же контексте форматирования блоков

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

#container::after { 
  content: "";
  display: block; 
  clear: both;
}

Синтаксис

/* Значения ключевых слов */
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;

/* Global values */
clear: inherit;
clear: initial;
clear: unset;

Значения

none
Является ключевым словом, указывающим, что элемент не перемещается вниз, чтобы очистить предыдущие плавающие элементы.
left
Является ключевым словом, указывающим, что элемент перемещается вниз, чтобы очистить левые поплавки.
right
Является ключевым словом, указывающим, что элемент перемещается вниз, чтобы удалить прошлые правые поплавки.
both
Это ключевое слово, указывающее, что элемент перемещается вниз, чтобы очистить как левые, так и правые поплавки.
inline-start
Является ключевым словом, указывающим, что элемент перемещается вниз для очистки поплавков в начале содержащего его блока, то есть левые поплавки на скриптах ltr и правые поплавки на скриптах rtl.
inline-end
Является ключевым словом, указывающим, что элемент перемещается вниз для очистки поплавков в конце содержащего его блока, то есть правые поплавки на скриптах ltr и левые поплавки на скриптах rtl.

Формальный синтаксис

none | left | right | both | inline-start | inline-end

Примеры

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 typediscrete
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Совместимость с браузером

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidiOS SafariSamsung Internet
Базовая поддержкаChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 4Opera Полная поддержка 3.5Safari Полная поддержка 1WebView Android Полная поддержка 1Chrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка 6Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка Да
Flow-relative values inline-start and inline-end
Экспериментальная
Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Полная поддержка 55IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетEdge Mobile Нет поддержки НетFirefox Android Полная поддержка 55Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.

 

Смотрите также

Метки документа и участники

Метки: 
Внесли вклад в эту страницу: warsan
Обновлялась последний раз: warsan,