CSS свойство clear

CSS свойства

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

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

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

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

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
clear1.01.06.01.05.012.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>
Пример использования свойства clear.
Пример использования свойства clear.
CSS свойства