w3docs logo

CSS свойство clear

Свойство clear устанавливает, должен ли элемент находиться рядом с плавающими элементами или же ниже плавающих элементов (clear).

Можно применить свойство clear к плавающим и неплавающим элементам. Имеет четыре значения - none, left, right и both. "None" - значение по умолчанию. Значение разрешает плавающие элементы с обеих сторон. Значение "left" запрещает плавающие элементы с левой стороны. Значение "right" запрещает плавающие элементы с правой стороны. Значение "both" запрещает плавающие элементы с левой и правой стороны.

Значение по умолчанию none
Применяется К элементам блочного уровня.
Наследуется Нет
Анимируемое Нет
Версия CSS1
DOM синтаксис object.style.clear = "both";

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      img {
      float: left;
      background: #ccc
      }
      .clear { 
      clear: right;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png">
    <p class="clear">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>
  </body>
</html>

Пример со значением "left":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      img {
      float: right;
      background: #ccc
      }
      .clear { 
      clear: left;
      }
    </style>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png">
    <p class="clear">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>
  </body>
</html>

Пример со значением "both":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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 - это текст-"рыба", часто используемый в печати и вэб-дизайне.</p>
    <p class="clear">Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>
  </body>
</html>

Значения

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

Поддержка браузера

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

Практикуйте свои знания

Что делает свойство CSS clear?
Считаете ли это полезным?