Свойство CSS clear

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

Когда элемент становится плавающим, следующее за ним содержимое обтекает его. clear позволяет остановить это обтекание: сброшенный элемент опускается ниже нижней границы плавающих элементов на указанной стороне вместо того, чтобы располагаться рядом с ними.

На этой странице рассказывается о том, что делает каждое значение clear, о наиболее распространённой причине использования clear (паттерн «clearfix» для охвата плавающих элементов) и о типичных ошибках.

Как работает clear

clear принимает значения none, left, right, both, initial и inherit:

• none — значение по умолчанию. Элемент может располагаться рядом с плавающими элементами с обеих сторон.
• left — элемент перемещается ниже всех левых плавающих элементов, стоящих перед ним.
• right — элемент перемещается ниже всех правых плавающих элементов, стоящих перед ним.
• both — элемент перемещается ниже всех плавающих элементов с любой стороны. Это значение нужно в большинстве случаев.

Примечание: clear реагирует только на плавающие элементы, которые стоят раньше в разметке, и влияет только на элементы в нормальном блочном потоке. Оно не работает внутри макетов Flexbox или CSS Grid, где свойство float само по себе игнорируется.

Когда использовать clear?

Самое распространённое применение clear — охват плавающих элементов. Родительский контейнер, содержащий только плавающие дочерние элементы, схлопывается до нулевой высоты, потому что плавающие элементы выведены из нормального потока. Классическое решение — «clearfix» — добавляет сброшенный псевдоэлемент после плавающих элементов, чтобы родитель растянулся и охватил их:

/* Clearfix: makes a container wrap its floated children */
.container::after {
  content: "";
  display: block;
  clear: both;
}

Другой распространённый случай — принудительное размещение подвала, заголовка или разделителя секции ниже плавающего изображения или боковой панели вместо обтекания рядом с ними — именно это и показано в примерах ниже.

Синтаксис

Синтаксис свойства CSS clear

clear: none | left | right | both | initial | inherit;

Пример свойства clear:

Пример свойства CSS clear со значением left

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        float: left;
        background: #ccc
      }
      .clear {
        clear: left;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" />
    <p class="clear">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
  </body>
</html>

Результат

Пример свойства clear со значением «right»:

Пример свойства CSS clear со значением right

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        float: right;
        background: #ccc
      }
      .clear {
        clear: right;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" />
    <p class="clear">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </p>
  </body>
</html>

Пример свойства clear со значением «both»:

Пример свойства CSS clear со значением both

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        float: right;
        background: #CCC;
      }
      p.clear {
        clear: both;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" width="220" height="80" />
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </p>
    <p class="clear">
      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </p>
  </body>
</html>

Пример паттерна clearfix

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        border: 3px solid #1c87c9;
      }
      .box img {
        float: left;
        background: #ccc;
      }
      /* Remove this rule and the border collapses around nothing */
      .box::after {
        content: "";
        display: block;
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" width="220" height="80" alt="Floated image" />
    </div>
  </body>
</html>

Распространённые ошибки

• clear реагирует только на предшествующие плавающие элементы. Оно опускает элемент ниже плавающих, которые стоят раньше него в разметке, но не после. Выстраивайте разметку соответственно.
• Применять clear к самому плавающему элементу редко имеет смысл. Чтобы охватить плавающие элементы, сбрасывайте соседний элемент после них (псевдоэлемент ::after по паттерну clearfix), а не сами плавающие элементы.
• В Flexbox или CSS Grid clear не работает. Внутри flex- или grid-контейнера float игнорируется, поэтому clear не на что воздействовать. Для новых проектов используйте Flexbox или CSS Grid вместо макетов на основе float.

Значения

Практика