html.okpython.net
HTML и CSS для начинающих

CSS :: Плавающие элементы

css-свойство float

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

Сразу же отметим, что свойство float не применяется к элементам с абсолютным и фиксированным позиционированием.

В качестве значений свойство float может принимать:

  • left – элемент будет выравниваться по левому краю, а все остальные элементы обтекать его по правой стороне;
  • right – элемент будет выравниваться по правому краю, а все остальные элементы обтекать его по левой стороне;
  • none – элемент будет отображаться обычным образом, т.е. перестанет быть плавающим.
HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Свойство float</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 доходит до плавающего элемента, он вставляет его в документ в соответствии с текущим потоком, а затем, в зависимости от значения свойства float, смещает его к правому или левому краю родительского элемента. При этом все блочные элементы занимают его место и ведут себя так, как будто плавающий элемент вообще отсутствует в документе. Строчные элементы и элементы с похожим поведением (например, изображения) наоборот, видят плавающий элемент и обтекают его, считаясь при этом с установленными внешними отступами, которые были заданы свойствами группы margin.

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

HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Свойство float</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. Использование плавающих элементов

css-свойство clear

В CSS имеется возможность для блочных элементов сделать так, чтобы они не обтекали плавающие элементы, которые идут в html-коде выше. Для этого используется ненаследуемое свойство clear (см. пример №3), которое может принимать значения, определяющие обтекание каких плавающих элементов осуществлять не нужно:

  • left – данный блочный элемент не будет обтекать плавающие элементы, которые находятся выше в html-коде и для которых применяется свойство float, имеющее значение left;
  • right – данный блочный элемент не будет обтекать плавающие элементы, которые находятся выше в html-коде и для которых применяется свойство float, имеющее значение right;
  • both – данный блочный элемент не будет обтекать плавающие элементы, которые находятся выше в html-коде и для которых применяется свойство float, имеющее значение left или right;
  • none – элемент будет обтекать плавающие элементы как обычно, т.е. согласно значениям свойства float.
HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Свойство clear</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>

Пример №3. Использование свойства clear

Отметим, что на практике для устранения неблагоприятных последствий выпадения плавающих элементов из общего потока документа часто используется специальный прием с применением блока-опоры для данных плавающих элементов. Ознакомиться с приемом подробнее можно на страничке нашего учебного сайта №1 здесь.

Быстрый переход к другим страницам

▲
▼