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 {
 content: "";
 display: block;
 clear: both;
 }


Синтаксис
---------


```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  | (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)  
  both-inline   | (en-US)  
  both-block    | (en-US)  
  both          | (en-US)  
  none            
  
```

Примеры
-------

### clear: left

#### HTML


```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


```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 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


```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 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


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

Характеристики
--------------

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-clear |
| CSS Logical Properties and Values Level 1 # float-clear |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Box model (en-US)