belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...

CSS >>>

5.3. Плавающие элементы и связанные с ними свойства

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

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

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

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

Пример 5.6. Использование плавающих элементов (пример №1)

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

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

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

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

Пример 5.7. Использование плавающих элементов (пример №2)

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Свойство clear</title>
	<style>
		.class_1{
		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="class_1 pos_1" style="background-color: yellow;">
			1. float: left. </div>
		
		<div style="background-color: violet; clear: left;">
			2. Не плавающий, clear: left.</div>
		
		<div class="class_1 pos_3" style="background-color: yellow;">
			3. float: left.</div>
		
		<div class="class_1 pos_4" style="background-color: violet;"> 
			4. float: right, clear: left.</div>
	</div>
</body>
</html>

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

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

Контрольные вопросы и задания

  1. Как называются элементы, к которым применяется свойство float? Подробно опишите его.
  2. Как отменить обтекание блочным элементом плавающего элемента?

Словарь новых английских слов

display [dɪˈspleɪ] – показывать, демонстрировать.
inline [ɪnˈlaɪn] – строчный.
run [rʌn] – бежать, скользить.
table [ˈteɪb(ə)l] – таблица, стол.
caption [ˈkæpʃn] – заголовок.
cell [sel] – отсек, ячейка.
row [rou] – ряд.
column [ˈkɑːləm] – столбец, колонка.
group [ɡruːp] – группа.
head [hed] – голова, головной.
foot [fʊt] – ступня, основание, нижняя часть.
list [lɪst] – список, каталог.
item [ˈaɪtəm] – пункт, параграф.
none [nʌn] – никакой, ничто.
relative [ˈrelətɪv] – относительный.
static [ˈstætɪk] – неподвижный, статичный.
move [mu:v] – двигать, перемещать.
absolute [ˈæbsəluːt] – абсолютный, безусловный.
fixed [fɪkst] – неподвижный, закрепленный.
bottom [ˈbɑːtəm] – самый нижний, последний.
clip [klɪp] – урезать, обрезать.
float [floʊt] – плавать.
margin [ˈmɑːrdʒən] – поле страницы, запас.
overflow [oʊvərˈfloʊ] – переполнять.
hidden [ˈhidn] – скрытый, спрятанный.
clear [klɪə] – очищать.
both [boʊθ] – оба.
visibility [ˌvɪzəˈbɪləti] – видимость, обзор.
collapse [kəˈlæps] – сплющивание.
opacity [oʊˈpæsəti] – непрозрачность.
align []əˈlaɪn – ставить в ряд.
vertical [ˈvəːtɪk(ə)l] – вертикальный, отвесный.
middle [ˈmɪdl] – средний.
resize [rɪˈsaɪz] – изменять размер.
Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх