clear

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

Попробуйте

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

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

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

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

#container {
  display: flow-root;
}

Синтаксис

/* Keyword values */
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;

/* Global values */
clear: inherit;
clear: initial;
clear: revert;
clear: revert-layer;
clear: unset;

Значения

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

Формальное определение

Начальное значение	`none`
Применяется к	блочным элементам
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	дискретный

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

clear = 
  inline-start  |
  inline-end    |
  block-start   |
  block-end     |
  left          |
  right         |
  top           |
  bottom        |
  both-inline   |
  both-block    |
  both          |
  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">This paragraph clears 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. 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="right">This paragraph clears 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. Fusce pulvinar lacus
    ac dui.
  </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">This paragraph clears 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%;
}

Спецификации

Спецификация
Спецификация Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) # propdef-clear
CSS Logical Properties and Values Level 1 # float-clear

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`clear`	1	12	1	3.5	1	18	4	10.1	1	1.0	4.4
`both`	1	12	1	15	1	18	4	14	1	1.0	4.4
`inline-end`	118	118	55	104	15	118	55	79	15	25.0	118
`inline-start`	118	118	55	104	15	118	55	79	15	25.0	118
`left`	1	12	1	15	1	18	4	14	1	1.0	4.4
`right`	1	12	1	15	1	18	4	14	1	1.0	4.4

См. также

Базовая модель CSS-блока

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/clear