CSS :: Свойство clear

css-свойство clear (от англ. clear – очищать) определяет порядок обтекания данным блочным элементом плавающих элементов, которые идут в html-коде выше.

Характеристики

Значение по умолчанию: none.
Применяется: к блочным элементам.
Наследуется: нет.
Анимируется: нет.
JavaScript: object.style.clear="value".

Синтаксис

clear: none | left | right | both

Значения

left – данный блочный элемент не будет обтекать плавающие элементы, которые находятся выше в html-коде и для которых применяется свойство float, имеющее значение left.
right – данный блочный элемент не будет обтекать плавающие элементы, которые находятся выше в html-коде и для которых применяется свойство float, имеющее значение right.
both – данный блочный элемент не будет обтекать плавающие элементы, которые находятся выше в html-коде и для которых применяется свойство float, имеющее значение left или right.
none – элемент будет обтекать плавающие элементы как обычно, т.е. согласно значениям свойства float.

Ссылки

Официальный сайт W3C: https://www.w3.org/TR/CSS2/visuren.html#flow-control

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/clear

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
	
		.div_float{
		margin: 10px;
		border: solid 8px red;
		width: 100px;
		height: 60px;
		}
		
		.pos_1{float: left; }
		.pos_3{float: left; }
		.pos_4{float: right; clear: left}
		
	</style>
	
</head>
<body>

	<div style="border: solid 6px blue; width: 400px; overflow: auto;">
		
		<div class="div_float pos_1" style="background-color: yellow;">
			1. float: left. 
		</div>
		
		<div style="background-color: violet; clear: left;">
			2. Не плавающий, clear: left.
		</div>
		
		<div class="div_float pos_3" style="background-color: yellow;">
			3. float: left.
		</div>
		
		<div class="div_float pos_4" style="background-color: violet;"> 
			4. float: right, clear: left.
		</div>
		
	</div>
	
</body>
</html>

Пример №1