CSS :: Свойство clear
http://belarusweb.net
Основы создания сайтов

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.

Ссылки

Примеры

HTML Результат BwCodes
<!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