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

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

Поведение плавающих элементов отличается от поведения стандартных элементов. Когда браузер в ходе интерпретации кода HTML доходит до плавающего элемента, он вставляет его в документ в соответствии с текущим потоком, а затем, в зависимости от значения свойства float, смещает его к правому или левому краю родительского элемента. При этом все блочные элементы занимают его место и ведут себя так, как будто плавающий элемент вообще отсутствует в документе. Строчные элементы и элементы с похожим поведением (например, изображения) наоборот, видят плавающий элемент и обтекают его, считаясь при этом с установленными внешними отступами, которые были заданы свойствами группы margin.

В одном ряду разрешается расмещать несколько плавающих элементов. Если же ширины родительского элемента не хватит на все плавающие элементы, то некоторые из них будут смещены вниз. Следует отметить, что по умолчанию плавающие элементы не влияют на высоту родительского элемента, поэтому могут выходить за его пределы. Для устранения такой проблемы нужно либо заранее задать соответствующие размеры родительского элемента, либо воспользоваться свойством overflow, использовав значение auto или hidden, что заставит браузер автоматически рассчитать размеры родительского элемента с учетом плавающих элементов (см. пример №2).

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

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

Синтаксис

float: left | right | none

Значения

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

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css2/visuren.html#propdef-float

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

Примеры

HTML Результат

htmlCodes

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

	<style>
	
		.div_float{
		padding: 10px;
		margin: 10px;
		border: solid 8px red;
		width: 100px;
		height: 50px;
		}
		
		.float_1{float: left;}
		.float_2{float: right;}
		
	</style>
	
</head>
<body>
	
	<div style="border: solid 6px blue; width: 400px; padding: 10px;">
		
		<div class="div_float float_1" style="background-color: yellow;">
			Первый div (float: left). 
		</div>
		
		<p> 
			Текст обтекает первый div со всех сторон, кроме левой, 
			т.к. у него свойство float имеет значение left.
		</p> 
		
		<div class="div_float float_2" style="background-color: violet;">
			Второй div (float: right).
		</div>
		
		<p> 
			Второй div обтекается со всех сторон, кроме правой, 
			т.к. у него свойство float имеет значение right.
		</p>
		
	</div>
	
</body>
</html>

Пример №1

HTML Результат

htmlCodes

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

	<style>
	
		.div_float{
		padding: 10px;
		margin: 10px;
		border: solid 8px red;
		width: 250px;
		height: 100px;
		}
		
		.float_1{float: left;}
		.float_2{float: right;}
		
	</style>
	
</head>
<body>
	
	<div style="border: solid 6px blue; width: 460px; padding: 10px;">
		
		<div class="div_float float_1" style="background-color: yellow;">
			Первый div (float: left). 
		</div>
		
		<p> 
			Текст обтекает первый div со всех сторон, кроме левой, т.к. у 
			него свойство float имеет значение left.
		</p> 

		<div class="div_float float_2" style="background-color: violet;">
			Второй div (float: right). Он выходит за пределы родительского 
			элемента, т.к. тот его не видит. Для устранения такой проблемы 
			нужно задать родительскому элементу соответствующую высоту. 
		</div>
		
		<p> 
			Второй div обтекается со всех сторон, кроме правой, т.к. у 
			него свойство float имеет значение right.
		</p>
		
	</div><br><br><br>
	
	<div class="div_float float_1" style="background-color: violet;">
			Третий div (float: left).
	</div>
	
	<p style="background-color: yellow; width: 450px; padding: 10px;"> 
		Обратите внимание, что сам элемент «p» игнорирует плавающий 
		элемент, а вот строковое содержимое видит и обтекает его!!!
	</p>
	
</body>
</html>

Пример №2