Меню
✘Скрыть меню
Меню заработка
✘Скрыть меню
Загрузка.. nostroma.online from NOSTROMA - best life and beautiful workЭто ужасно тяжелая работа — ничего не делать – Оскар УайльдРешающую роль в работе играет не всегда материал, но всегда мастер – Максим ГорькийЯ слишком энергичен, чтобы работать – Марсель АшарЧто привлекло меня в карьере писателя? Отсутствие бумажной работы.Одни люди работают только для того чтобы работать, другие – для того, чтобы иметь возможность не работать в будущем.Занятие ерундой на рабочем месте развивает боковое зрение, слух и бдительность в целомСтоит статýя в лучах заката с огромным буем, в руках - граната.Друзья, если вы попались на лохотрон, не будьте эгоистами - предупредите других о таком сайте!Секрет гения — это работа, настойчивость и здравый смысл. Томас Эдисон
Меню заработка

Курсы HTML/CSS

Урок 21. Свойство float, "выпадение" плавающего элемента

Содержание курса

Свойство float

В 12 уроке курса 1-1 мы познакомились с основными характеристиками свойства float. Рассмотрим теперь это свойство на более высоком уровне и узнаем о нем ещё кое-что новое. Начнем урок с разбора такого примера кода:

<!DOCTYPE html>
	<html>
		<head>
			<title>Свойство float</title>
			<style>
			
				html {
					font-size: 1.8em;
					}
					
				#left {
					background: LightBlue; 
					width: 200px;
					height: 300px;
					margin: 30px;
					}
					
				#box {
					background: Plum;
					}
					
				#in {
					background: MidnightBlue;
					color: Thistle;
					}
					
			</style>
		</head>
		<body>
			<span id="left">Плавающий элемент</span>
			
			<div id="box">
				<div>text text text text text text text text text text text text
				text text text text text text text text text text text text
				text text text text text text text text text text text text
				text text text text text text text text text text text text
				text text text text text text text text text text text text
				text text text text text text text text text text text text
				text text text text text text text text text text text text
				text text text text text text text text text text text text</div>
				<div id="in">Здесь вставлен текст в блоке</div>
				<div>text text text text text text text text text text text text
				text text text text text text text text text text text text
				text text text text text text text text text text text text
				text text text text text text text text text text text text
				text text text text text text text text text text text text
				text text text text text text text text text text text text
				text text text text text text text text text text text text
				text text text text text text text text text text text text</div>
			</div>
		</body>
	</html>

Для плавающего элемента "left" заданы габаритные размеры - ширина (width) 200px и высота (height) 300px. Однако для элемента с id="left" эти свойства не сработают потому, что <span> - это строчный элемент, а задавать размеры для строчных элементов - бесполезное занятие. Кстати, это касается и ссылок: многие бьются над заданием размеров для ссылки, но ссылка - тег <a> - строчный элемент и размеры для него работать не будут, поэтому, либо выставляйте значение display: block, либо используйте другие способы.

Что касается внешних отступов - margin, заданных в примере для строчного элемента "left", то сработают только горизонтальные отступы, вертикальные будут проигнорированы.

Если мы теперь зададим для элемента "left" свойство float: left, то картина сильно изменится:

Когда для элемента задаётся свойство float, он автоматически получает блочное представление. Теперь на элемент "left" подействовали правила ширины, высоты и внешних вертикальных отступов. Ещё одно важное замечание: элементы с display: block не замечают плавающие элементы на странице и могут под них подлезать, однако текст этих элементов будет обтекать плавающие.

Если требуется, чтобы блочный элемент учитывал плавающие, то для него задаётся свойство clear. Зададим в нашем примере элементу "in" (тот, что выглядит синей полоской) свойство clear: left, тем самым запретив ему обтекание плавающих элементов с левой стороны от себя:

Взаимодействие плавающих элементов

Рассмотрим как плавающие элементы взаимодействуют друг с другом на примере такого кода:

<!DOCTYPE html>
	<html>
		<head>
			<title>Взаимодействие плавающих элементов</title>
			<style>
			
				.left {
					background: #9ff;
					margin: 0 15px 15px 0;
					width: 150px;
					height: 150px; 
					float: left;
					}
					
			</style>
		</head>
		<body>
			<div class="left">DIV 1</div>
			<div class="left t">DIV 2</div>
			<div class="left">DIV 3</div>
			<div class="left a">DIV 4</div>
			<div class="left">DIV 5</div>
			<div class="left">DIV 6</div>
			<div class="left">DIV 7</div>
			<div class="left">DIV 8</div>
			<div class="left">DIV 9</div>
		</body>
	</html>

Здесь для DIV4 и DIV2 заданы (через пробел) два класса.

Первым шагом плавающий элемент поднимается максимально высоко, а затем смотрит, куда он "плывёт" - налево или направо. Первый элемент поднимается максимально высоко, затем двигается влево до упора. Второй делает тоже самое, только "упором" для него при движении влево теперь становится первый DIV:

DIV 5 не хватает места в первом ряду, поэтому он первым занимает второй ряд и так далее.

Теперь для элементов с классом "a" в этом же примере зададим высоту побольше - 200px:

<!DOCTYPE html>
	<html>
		<head>
			<title>Взаимодействие плавающих элементов</title>
			<style>
			
				.left {
					background: #9ff; 
					margin: 0 15px 15px 0; 
					width: 150px;
					height: 150px;
					float: left;
					}
					
				.a {
					height: 250px;
					}
					
			</style>
		</head>
		<body>
			<div class="left">DIV 1</div>
			<div class="left t">DIV 2</div>
			<div class="left">DIV 3</div>
			<div class="left a">DIV 4</div>
			<div class="left">DIV 5</div>
			<div class="left">DIV 6</div>
			<div class="left">DIV 7</div>
			<div class="left">DIV 8</div>
			<div class="left">DIV 9</div>
		</body>
	</html>

Теперь, поднявшись до упора в DIV4, пятый DIV начинает двигаться влево до упора.

Если увеличивать область просмотра в браузере, то когда у DIV5 появится возможность двигаться вверх в первый ряд, он ею воспользуется:

Таким образом, плавающий элемент начинает двигаться от правого нижнего края сначала до упора вверх, затем до упора влево, и так двигаются все DIV'ы в нашем примере по очереди.

"Выпадение" плавающего элемента

Рассмотрим на примере следующего кода явление "выпадения" плавающего элемента:

<!DOCTYPE html>
	<html>
		<head>
			<title>"Выпадение" плавающего элемента</title>
			<style>
			
				#out {
					background: #7CFC00; 
					padding: 15px;
					}
					
				#left {
					background: #0bf;
					height: 150px; 
					width: 150px;
					float: left;
					}
					
			</style>
		</head>
		<body>
			<div id="out">
				<div id="left"></div>
			</div>
		</body>
	</html>

Элементу с id="left" (голубому) задано свойство float, а значит он плавающий и родительский элемент (с id="out" - зелёный) его не замечает. Поэтому элемент "left" "вывалился" из своего родителя:

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

Если же для родителя указана высота, то применение свойства overflow уже не годится. В этом случае есть такое решение: в родительском элементе создаётся ещё один служебный элемент, следующий за блоком "left", для которого задаётся свойство clear:left

<!DOCTYPE html>
	<html>
		<head>
			<title>"Выпадение" плавающего элемента</title>
			<style>
			
				#out {
					background: #7CFC00;
					padding: 15px;
					}
					
				#left {
					background: #0bf;
					height: 150px; 
					width: 150px; 
					float: left;
					}
					
				#bottom {
					background: #f44; 
					padding: 15px; 
					clear: left;
					}
					
			</style>
		</head>
		<body>
			<div id="out">
				<div id="left"></div>
				<div id="bottom">Служебный блок</div>
			</div>
		</body>
	</html>

Результат отображения в браузере:

Даже если у служебного элемента "bottom" удалить содержимое, высоту и фон, то результат будет тем же - выпадения элемента "left" из своего родителя не произойдёт.

Третий способ предотвращения выпадения дочернего элемента из родительского заключается в генерации контента через CSS посредством псевдоэлемента :after

<!DOCTYPE html>
	<html>
		<head>
			<title>"Выпадение" плавающего элемента</title>
			<style>
			
				#out {
					background: #7CFC00;
					padding: 15px;
					}
					
				#left {
					background: #0bf;
					height: 150px; 
					width: 150px;
					float: left;
					}
					
				#out:after {
					content: ""; 
					background: #f44;
					padding: 15px; 
					display: block;
					clear: left;
						}
						
			</style>
		</head>
		<body>
			<div id="out">
				<div id="left"></div>
			</div>
		</body>
	</html>

Результат отображения в браузере:

Комментарии

Введите Ваше имя:*

Введите e-mail:

Ваш комментарий:*

* Обязательные поля