CSS-свойство `clear`

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

Попробуйте

clear: none;

clear: left;

clear: right;

clear: both;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="floated-left">Left</div>
    <div class="floated-right">Right</div>
    <div class="transition-all" id="example-element">
      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: rgb(81 81 81 / 0.6);
  padding: 1em;
  float: left;
}

.floated-right {
  border: solid 10px #ffc129;
  background-color: rgb(81 81 81 / 0.6);
  padding: 1em;
  float: right;
  height: 150px;
}

Синтаксис

/* 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.

Описание

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

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

Очищать обтекание нужно для предшествующих плавающих элементов в том же контексте блочного форматирования.

#container {
  display: flow-root;
}

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

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

clear = 
  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">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: white;
  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: white;
  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: white;
  width: 20%;
}
.red {
  float: right;
  margin: 0;
  background-color: pink;
  width: 20%;
}
p {
  width: 45%;
}

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

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

См. также

• Базовая блочная модель CSS