clear
Поддержка браузерами
12.0+ | 5.0+ | 1.0+ | 1.0+ | 6.0+ | 1.0+ |
Описание
CSS свойство clear
указывает с какой стороны текущего элемента не допускаются плавающие элементы (плавающими являются элементы, у которых CSS свойство float имеет значение right
или left
).
Если для элемента установлен запрет обтекания плавающих элементов с обеих сторон, то он будет смещён вниз - под плавающий элемент. Обратите внимание, что элемент будет смещён под плавающий элемент только в том случае, если плавающий элемент находится с той же стороны, с которой он запрещён у текущего элемента.
Рассмотрим на небольшом примере как работает свойство clear
. На изображении, расположенном ниже, видно, что плавающий элемент с идентификатором sidebar
частично перекрывает два блочных элемента.
Нам нужно сделать так, чтобы нижний блочный элемент не перекрывался плавающим элементом, для этого воспользуемся свойством clear
для <div>
с идентификатором footer
и установим ему значение right
. Таким образом мы указали, что с правой стороны элемента не может быть никакого плавающего содержимого, в результате чего он смещается немного вниз и располагается под плавающим элементом:
Значение по умолчанию: | none |
---|---|
Применяется: | к элементам блочного уровня (в том числе и к самим плавающим элементам) |
Анимируется: | нет |
Наследуется: | нет |
Версия: | CSS1 |
Синтаксис JavaScript: | object.style.clear="left" |
Синтаксис
clear: none|left|right|both|inherit;
Значения свойства
Значение | Описание |
---|---|
left | Плавающие элементы не разрешены с левой стороны. |
right | Плавающие элементы не разрешены с правой стороны. |
both | Плавающие элементы не разрешены с обеих сторон. |
none | Разрешить наличие плавающих элементов с обеих сторон. |
inherit | Указывает, что значение наследуется от родительского элемента. |
Пример
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Пример</title> <style> img { float: left; } p.clear { clear: both; } </style> </head> <body> <img src="logocss.gif" width="95" height="84"> <p>Это какой-то текст.</p> <p class="clear">Это какой-то текст.</p> </body> </html>
Результат данного примера в окне браузера:
