W3docs
ru
Войти

Свойство CSS clear

Свойство 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;
}

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

Начальное значениеnone
Применяется кБлочным элементам.
НаследуетсяНет.
АнимируетсяНет.
ВерсияCSS1
DOM-синтаксисelement.style.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>
Попробуйте сами »

Результат

CSS clear Property

Пример свойства 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.

Значения

ЗначениеОписание
noneРазрешает плавающие элементы с обеих сторон. Является значением по умолчанию для этого свойства.
leftЗапрещает плавающие элементы с левой стороны.
rightЗапрещает плавающие элементы с правой стороны.
bothЗапрещает плавающие элементы с обеих сторон.
initialУстанавливает свойству значение по умолчанию.
inheritНаследует свойство от родительского элемента.

Практика

Практика
Что делает свойство 'clear' в CSS?
Что делает свойство 'clear' в CSS?
Was this page helpful?