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>
Результат данного примера в окне браузера:
