04. Float

CSS-свойство float

Когда заходит речь о расположении блоков на странице, на сцену выходит CSS-свойство float. По умолчанию блоки складываются друг под друга. Чтобы смещать блоки в стороны и удерживать их на одной линии, используется свойство float. Создайте новый html-файл с произвольным названием. Наполните тем же содержимым, что и index.html, с которым мы работали, но оставьте <body> пустым. Туда мы поместим нижеследующий код.

	<div class="outer">
		<div class="leftcol">

			<p>Вне этой полосе показывает сильную концентрацию к галактическому экватору гипотеза. Выводу о так как мы указывали выше, динамическими соображениями кроме немногочисленных. Света очень близкие звезды, имеющие низкие температуры, 500к только принадлежащие надеяться. И была выдвинута гипотеза о так как и нельзя решить, какой именно. Звезды первой труппы, как только принадлежащие. По небу дискретных источников радиоизлучения в том, что они расположены.</p>

			<p>Нельзя решить, какой именно из них расположена в тех местах. Многочисленная, состоит в этом случае поглощение света очень много. Приметных оптических и они делятся. Располагающихся вне этой полосе около галактического. Отсутствие концентрации этих источников радиоизлучения второй группы могли. Нет, а слабых галактик не проявляли себя в радиоволнах, больше. Местах, где наблюдались интенсивный источники радиоизлучения. Концентраций к ее плоскости галактики.</p>

		</div>
		<div class="rghtcol">

			<p>Источников при наблюдениях в радиоизлучение, как и следовало. Десятки квадратных минут гипотетические радиозвезды существование. Признаков концентраций к галактическому экватору многочисленная, состоит из источников, располагающихся. Пылевая межзвездная среда прозрачна радиоизлучение. Температурами, а оптическое излучение будет понятно многочисленная, состоит. Нельзя решить, какой именно из них уже отождествлены с газовыми туманностями. Искать в тех местах, где наблюдались лишь. Только принадлежащие близ плоскости галактики тоже будет все-таки слишком слабым останется.</p>

		</div>
	</div>

CSS-файл будет со следующим содержанием.

html, body {
	min-width:320px;
	font-size:16px;
	margin:0;
	padding:0;
	height:100%;
}
body {
	font-family:Roboto, Calibri, Arial, sans-serif;
	color:#252525;
}
h1 {
	font-size:36px;
	line-height:48px;
	text-align:center;
	margin-bottom:12px;
}

.leftcol {
	float:left;
	width:48%;
}
.rghtcol {
	float:right;
	width:48%;
}

Чтобы вникнуть в логику работы этого свойства, нам нужно прибегнуть к отладчику. Нажмите F12 и вы увидите панель отладчика.

В отладчике есть кнопка, нажав которую, вы сможете подсвечивать html-элементы страницы. Нажмите её и попробуйте повыделять различные элементы. На иллюстрации ниже указаны некотороые основные возможности панели с точки зрения верстальщика.

DOM — объектная модель документа. По сути дерево тегов. Отображает, взаимоотношения тегов, кто кому приходится родителем (parent), кто кому потомок (child), а кто является узлом одного уровня (sibling). Английские названия даю, чтобы они «помозолили» глаза, т.к. в дальнейшем, в частности в JavaScript они будут не раз всплывать.

А вот теперь давайте посмотрим, что будет, если количество плавающих блоков увеличится и они будут разной высоты.

	<div class="outer">
		<div class="block01"></div>
		<div class="block02"></div>
		<div class="block03"></div>
		<div class="block04"></div>
		<div class="block05"></div>
	</div>

Изменим только CSS-код, касающийся непосредственно плавающих блоков. Мне понадобится фиксированная ширина блоков в пикселях, чтобы продемонстрировать «родовое проклятье» плавающих блоков. Вы же задайте у себя им такие значения ширины, чтобы все 5 поместились в 1 ряд, ничего страшного, если место ещё останется.

/* Так делают, когда нескольким селекторам нужно задать одинаковые значения. */
.block01,
.block02,
.block03,
.block04,
.block05 {
	float:left;
	width:200px;
	height:100px;
	margin:10px;
}

.block01 {
	background:royalblue;
}
.block02 {
	background:green;
	height:200px; /* Это значение перекроет то, которое установлено в блоке, где перечислены все селекторы, т.к. оно идёт позже */
}
.block03 {
	background:gold;
	height:150px;
}
.block04 {
	background:cyan;
	height:150px;
}
.block05 {
	background:purple;
}

Внизу на двух скриншотах мы видим, что при уменьшении рабочей области, последний блок, который не уменьшается в рабочую область, перескакивает вниз. Но. Он перескакивает не под крайний слева блок (синий), а под первый справа, который имеет наименьшую высоту (под жёлтый, т.к. голубой имеет с жёлтым одинаковую высоту). Технически, это довольно логичное поведение блоков. Однако, в практичской вёрстке оно доставляет неприятности.

Это ещё не всё. Посмотрите на высоту элемента, который обёртывает плавающие блоки:

Свойство плавающих блоков не задавать высоту родительским элементам как-то объясняется в официальной документации. Вот только с практической точки зрения это баг. Баг, который надо как-то компенсировать.

Когда блоков только 2, вроде ничего. Но давайте вернёмся к самому первому листингу этой главы и дважды вставим его в документ, вот так:

	<div class="outer">
		<div class="leftcol">

			<p>Вне этой ... <!-- здесь много текста. Вы его копируйте полностью, я не буду --> ... расположены.</p>

			<p>Нельзя решить ... <!-- здесь много текста. Вы его копируйте полностью, я не буду --> галактики.</p>

		</div>
		<div class="rghtcol">

			<p>Источников ... <!-- здесь много текста. Вы его копируйте полностью, я не буду --> останется.</p>

		</div>
	</div>
	<div class="outer">
		<div class="leftcol">

			<p>Вне этой ... <!-- здесь много текста. Вы его копируйте полностью, я не буду --> ... расположены.</p>

			<p>Нельзя решить ... <!-- здесь много текста. Вы его копируйте полностью, я не буду --> галактики.</p>

		</div>
		<div class="rghtcol">

			<p>Источников ... <!-- здесь много текста. Вы его копируйте полностью, я не буду --> останется.</p>

		</div>
	</div>

Код CSS абсолютно тот же, что был в листинге для первого примера это главы. В результате выполнения этого кода мы видим, как фундаментальный баг объединился с особенностью поведения при переполнении блока-родителя плавающими блоками-потомками.