clear

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨июль 2015 г.⁩.

* Some parts of this feature may have varying levels of support.

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

Интерактивный пример

clear: none;

clear: left;

clear: right;

clear: both;

<section>  <div>    <div>Left</div>    <div>Right</div>    <div>      As much mud in the streets as if the waters had but newly retired from the      face of the earth, and it would not be wonderful to meet a Megalosaurus,      forty feet long or so, waddling like an elephantine lizard up Holborn      Hill.    </div>  </div></section>

.example-container {  border: 1px solid #c5c5c5;  padding: 0.75em;  text-align: left;  line-height: normal;}.floated-left {  border: solid 10px #ffc129;  background-color: rgba(81, 81, 81, 0.6);  padding: 1em;  float: left;}.floated-right {  border: solid 10px #ffc129;  background-color: rgba(81, 81, 81, 0.6);  padding: 1em;  float: right;  height: 150px;}

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

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

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

Синтаксис

css

/* Ключевые слова */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.

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

clear =
inline-start|
inline-end|
block-start|
block-end|
left|
right|
top|
bottom|
both-inline|
both-block|
both|
none

Примеры

clear: left

HTML

html

<div>  <p>    Давай лучше "бёзди хэппи" затянем, нежели Lorem ipsum dolor sit amet,    consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius    dui. Suspendisse eget dolor.  </p>  <p>    Пусть бегут неуклюже пешеходы по лужам, Lorem ipsum dolor sit amet,    consectetuer adipiscing elit.  </p>  <p>Этот абзац очищается слева.</p></div>

CSS

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

html

<div>  <p>    Лучше нести бред и околесицу, но более осмысленную, чем Lorem ipsum dolor    sit amet, consectetuer adipiscing elit.  </p>  <p>    - Так я ж намедни намекал, что Lorem ipsum dolor sit amet, consectetuer    adipiscing elit.  </p>  <p>Этот абзац очищается справа.</p></div>

CSS

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

html

<div>  <p>    Лучше нести осмысленную белиберду, чем "Lorem ipsum dolor sit amet,    consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius    dui. Suspendisse eget dolor.  </p>  <p>    Вот я и говорю, что "Lorem ipsum dolor sit amet, consectetuer adipiscing    elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget    dolor".  </p>  <p>Этот абзац очищает оба.</p></div>

CSS

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%;}