CSS свойство clear

Определение и применение

CSS свойство clear определяет с какой стороны текущего элемента не допускаются плавающие элементы.

К плавающими элементам относятся те элементы, у которых свойство float имеет значение left или right.

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

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
clear	1.0	1.0	6.0	1.0	5.0	12.0

CSS синтаксис:

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

JavaScript синтаксис:

object.style.clear = "right"

Значения свойства

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

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Свойство clear.</title>
<style> 
img {
width  : 100px; /* задаём ширину изображения */
height  : 100px; /* задаём высоту изображения */
float : left; /* Изображение становится плавающим элементом, смещенным влево */
}
.primer {
clear  : left; /* Плавающие элементы не разрешены с левой стороны элемента (значение both привело бы к тому же результату). */
}
</style>
</head>
	<body>
		<img src = "nich.jpg" alt = "nich">
		<p>Съешь же ещё этих мягких французских булок да выпей чаю.</p>
		<p class = "primer">Съешь же ещё этих мягких французских булок да выпей чаю.</div>
	</body>
</html>

CSS свойства