7. FLOATS

УРОК Nº 7.

Добротный учебник классической веб-разработки + user-friendly введение в CSS-верстку

За последние несколько уроков мы научились управлять размером блоков и пространством вокруг них, но в основном мы были привязаны к стандартному вертикальному потоку страницы. Блоковые элементы всегда располагались вертикально друг под другом, ограничивая нас одноколоночным макетом.

"Обтекание" [float] позволяют размещать элементы блокового уровня рядом, а не друг под другом. Это очень важно. С его помощью можно создавать всевозможные макеты, включая боковые колонны, многоколоночные страницы, grid-сетки и статьи в журнальном стиле с текстом, обтекающим изображение. Именно здесь наконец-то мы начнем создавать настоящие веб-страницы.

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

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

На этом уроке на примере довольно простого проекта мы рассмотрим CSS-понятие "обтекание" [float]. Вместо того чтобы работать с HTML-контентом, как это было в предыдущих главах, мы будем стилизовать кучу пустых элементов <div>. В итоге мы получим нечто похожее на изображение ниже. Это довольно сильно отличается от тех типов веб-страниц, которые мы создавали до сих пор, не так ли?

Сначала создайте новую папку floats, затем добавьте новую веб-страницу floats.html со следующей разметкой:

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<title>Floats</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<div class='page'>
<div class='menu'>Menu</div>
<div class='sidebar'>Sidebar</div>
<div class='content'>Content</div>
<div class='footer'>Footer</div>
</div>
</body>
</html>

Это дает нам базовую структуру большинства сайтов в Интернете. У нас есть место для размещения навигационного меню, боковой панели, основного контента и футера. Все эти элементы можно считать div-контейнерами, в которые помещается HTML-контент.

Открыв файл floats.html в браузере, вы не увидите ничего особенного, потому что у пустых элементов высота равна нулю. Мы исправим это в следующей секции.

стандартная модель поведения html-макета
default html layout behavior

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

Мы можем лучше рассмотреть наш пример страницы, добавив некоторые цвета фона и четко выраженную высоту для каждого из наших элементов <div>. Добавьте следующее в файл styles.css:

.menu {
height: 100px;
background-color: #B2D6FF; /* умеренно синий */
}

.sidebar {
height: 300px;
background-color: #F09A9D; /* красный */
}

.content {
height: 500px;
background-color: #F5CF8E; /* желтый */
}

.footer {
height: 200px;
background-color: #D6E9FE; /* голубой */
}

В результате мы получаем красивую радугу, но это не совсем то, что нам нужно, хотя и демонстрирует некоторые полезные концепции.

Здесь важно то, что каждый элемент уровня блока заполняет 100 % ширины родительского элемента (в данном случае <div class='page'>), и они отображаются вертикально друг под другом. И по-прежнему мы ограничены одноколоночным макетом.

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

Стоит взглянуть на то, что происходит, когда мы уменьшаем ширину элемента. Обновите наше правило .sidebar, изменив его на следующее:

.sidebar {
width: 200px; /* добавьте это */
height: 300px;
background-color: #F09A9D;
}

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

перемещение плавающего элемента
floating an element

Свойство CSS float дает нам контроль над горизонтальным положением элемента. Чтобы "сплавить" боковую панель влево, мы командуем браузеру выровнять ее по левой стороне страницы. Переместите нашу боковую панель влево с помощью следующей строки:

.sidebar {
float: left; /* добавьте это */
width: 200px;
height: 300px;
background-color: #F09A9D;
}

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

Вы также можете перемещать элементы вправо, как показано ниже (однако мы оставим нашу боковую панель перемещенной влево). Или, если вы переопределяете объявление float, вы можете отменить его с помощью значения none. Это наиболее распространенные значения для свойства float.

float: right; /* Выравнивание по правому краю */
float: none; /* Возврат к стандартному потоку */

Теперь у нас есть все необходимые инструменты для выравнивания элементов на уровне блоков: плавающие элементы для выравнивания по левому/правому краю и метод auto-margins для выравнивания по центру. Помните, что это относится только к блоковым блокам. Строчные [inline] блоки выравниваются с помощью свойства text-align, как описано ранее.

перемещение внутри родителей
floating inside of parents

Плавающие блоки всегда выравниваются по левому или правому краю родительского элемента. В нашем примере родителем боковой панели является <div class='page'>, ширина которого равна ширине окна браузера. Поэтому наша боковая панель плавает в крайней левой части страницы.

Давайте изменим это, придав нашей странице макет фиксированной ширины. И снова пригодится метод центрирования auto-margins. Добавьте в файл styles.css следующее:

Теперь мы видим, что .sidebar плавает слева от контейнера .page, а не у края окна браузера.

Подобное позиционирование вложенных div-контейнеров - это способ создания сложных макетов веб-сайтов. Мы начали с .page, чтобы отцентрировать всю страницу. Затем выровняли по левому краю боковую панель внутри этой отцентрированной страницы. Все может оказаться гораздо сложнее, но наш простой пример демонстрирует простую истину верстки CSS: все является блоком внутри блока внутри другого блока.

множественные плавающие элементы
multiple floats

Давайте рассмотрим наш плавающий элемент "в журнальном стиле", добавив четко выраженную ширину в блок .content:

.content {
width: 650px; /* Добавьте это */
height: 500px;
background-color: #F5CF8E;
}

Это наглядно показывает, что наша боковая панель находится внутри блока .content: если вы сделаете их скриншот, то получите изображение шириной 650 пикселей, а не 850 (ширина нашей боковой панели - 200 пикселей).

Такое поведение плавающего элемента хорошо для картинок (что мы рассмотрим позже), но для макета страницы мы хотим, чтобы блок контента находился рядом с боковой панелью, а не обтекал ее. Для этого нам нужно указать блоку контента, чтобы он тоже "плавал" слева. Добавьте еще одну строку в правило .content:

.content {
float: left; /* Добавьте это */
width: 650px;
height: 500px;
background-color: #F5CF8E;
}

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

Это дает нам полный контроль над горизонтальным выравниванием наших блочных блоков. Попробуйте поэкспериментировать со значениями плавающих элементов для .sidebar и .content, и вы увидите, что в вашем распоряжении уже есть несколько различных макетов:

Прежде чем двигаться дальше, убедитесь, что оба элемента плавают слева. Это позволит создать макет для боковой панели и блоков контента, но, к сожалению, испортит наш элемент .footer.

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

Мы можем увидеть это более четко, добавив красную рамку вокруг нашего элемента .page:

.page {
width: 900px;
margin: 0 auto;
border: 1px solid red; /* Добавьте это */
}

Обратите внимание, что рамка есть только вокруг элементов .menu и .footer. Словно плавающих элементов там вообще не было. Есть два способа исправить это: очистить плавающий элемент и скрыть переполнение.

ОЧИСТКА ПЛАВАЮЩИХ ЭЛЕМЕНТОВ
Clearing Floats

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

Мы можем использовать свойство clear, чтобы опустить наш футер в нижнюю часть страницы:

.footer {
clear: both; /* Добавьте это */
height: 200px;
background-color: #FD6E9FE;
}

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

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

Посмотрите, что произойдет, если мы уберем меню и футер из элемента .page. Измените элемент <body> так, чтобы он соответствовал следующему:

<body>
<div class='menu'>Menu</div>

<div class='page'>
<div class='sidebar'>Sidebar</div>
<div class='content'>Content</div>
</div>

<div class='footer'>Footer</div>
</body>

Поскольку .menu и .footer находятся за пределами фиксированной ширины .page, они занимают всю ширину окна. И это именно то, что нам нужно. Однако обратите внимание, что у .page снова нулевая высота, несмотря на то, что футер по-прежнему освобождает боковую панель и блоки контента.

И снова единственные элементы в .page - плавающие элементы, поэтому они не учитываются при определении высоты. Другими словами, перемещение футера за пределы контейнера .page нарушило наше исправление с помощью свойства clear.

СКРЫТИЕ ПЕРЕПОЛНЕНИЯ
Hiding Overflow

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

Решением является свойство overflow. Добавляя overflow: hidden к контейнеру div, мы указываем ему на необходимость распознавать высоту всех плавающих элементов, которые он содержит. Вот как мы можем добавить цвет фона к элементу .page и добиться того, чтобы он действительно отображался:

.page {
width: 900px;
margin: 0 auto;
overflow: hidden; /* Добавьте это */
background-color: #EAEDF0; /* Добавьте это */
}

Теперь вы увидите светло-серый фон на странице .page вместо белого, задаваемого по умолчанию. Это еще не полноценный фон (мы рассмотрим его в следующей секции). Важным моментом здесь является поведение этого самого overflow: hidden. Без него мы бы не смогли увидеть фон контейнера .page, потому что его высота была бы нулевой.

Подводя итог, можно сказать, что если у вас есть избыточный элемент HTML в нижней части контейнера div, используйте прозрачное решение. В прочих случаях добавьте объявление overflow: hidden к элементу контейнера. Суть обоих вариантов заключается в том, что вам нужен способ указать браузеру на необходимость включения плавающих элементов в высоту их контейнерного элемента, чтобы их фон отображался.

макеты во всю ширину окна
Full-Bleed Layouts

Далее мы хотим сделать так, чтобы фон нашей .page заполнял все окно браузера, не изменяя выравнивания боковых панелей и блоков контента. Проблема в том, что наш .page занят центрированием всего, и мы не можем использовать его для полноцветного фона, поскольку центрирование требует явно выраженного свойства width.

Пора сделать еще один контейнер div. Поместив блок вокруг .page, мы продолжаем центрировать материал, одновременно предоставляя место для определения свойства background-color. Измените <body> как показано ниже:

<body>
<div class='menu'>Menu</div>

<div class='container'> 
<div class='page'>
<div class='sidebar'>Sidebar</div>
<div class='content'>Content</div>
</div>
</div> 

<div class='footer'>Footer</div>
</body>

Помните, что при стандартном отображении блоков [default block-rendering behavior] элементы заполняют ширину своего контейнера. Поэтому мы можем перенести объявление фонового цвета в правило .container, чтобы получить фон на всю щирину страницы:

.page {
width: 900px;
margin: 0 auto;
}

.container {
overflow: hidden;
background-color: #EAEDF0;
}

Как и в предыдущей секции, нам по-прежнему нужна строка overflow: hidden, чтобы заставить .container обращать внимание на высоту плавающих элементов. Без нее мы бы не увидели цвет фона, потому что высота .container была бы нулевой.

Таким образом, мы получаем три вложенных элемента <div> для оформления нашей страницы: обертку .container для заполнения всего окна браузера, страницу фиксированной ширины .page для выравнивания по центру и, наконец, блоки .sidebar и .content, выровненные по левому краю. Подобное вложение и выравнивание довольно типично для большинства макетов веб-сайтов.

обтекание для колонок одной ширины
Floats for Equal-Width Columns

Мы уже рассмотрели макет страницы с боковой панелью, макет с фиксированной шириной и макет с заполнением всего окна браузера. Float-элементы также можно использовать для создания многоколоночных макетов. Это работает так же, как и плавающие элементы .sidebar и .content - просто их будет больше.

Следующий шаг - добавить три колонки одинаковой ширины в наш футер. Обновите элемент <footer> следующим образом:

Мы можем оформить каждую из этих колонок так же, как и остальную часть нашей страницы. Добавьте новое правило в styles.css:

.column {
float: left;
width: 31%;
margin: 20px 1.15%;
height: 160px;
background-color: #B2D6FF; /* умеренно синий */
}

Впервые мы используем процентные значения вместо пиксельных. Проценты в CSS относятся к ширине родительского элемента. В результате мы получаем три колонки, размер которых автоматически изменяется на одну треть окна браузера. Измените размер окна браузера, и вы увидите, как наши колонки увеличиваются и уменьшаются соответственно. Это начало адаптивного дизайна.

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

обтекание для сеток
Floats for Grids

Хотите сетку [grid] в футере вместо 3 колонок? Запросто! Когда не хватает места для горизонтальной укладки плавающего элемента, он опускается на следующую строку. Все, что нам нужно сделать, это добавить еще несколько элементов .column:

Наш фон футера слишком короток. К счастью, мы уже знаем, как это исправить. Давайте заменим явную высоту футера на другую - overflow: hidden, чтобы он мог вместить любое количество элементов сетки:

С помощью этой же техники можно создавать сетки любого размера. Например, для создания фотогалереи с кучей миниатюр достаточно поместить элементы сетки в .page, а не в футер, и добавить к ним элементы <img/>. Но, опять же, помните, что flexbox - это более современный способ создания подобных макетов.

О СТАНДАРТАХ НАИМЕНОВАНИЯ ФАЙЛОВ
A Brief Note on Naming Conventions

Название класса .column уже не совсем корректно. Этот сценарий - хороший пример того, почему мы хотим избегать имен классов, которые ссылаются на внешний вид. "Column" не очень подходит, потому что содержащийся в ней контент не обязательно должен отображаться в нескольких колонках (например, в мобильном макете, скорее всего, будет только одна колонка). Лучшим названием было бы что-нибудь вроде .footer-item, но мы оставим это на ваше усмотрение.

обтекание для контента
Floats for Content

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

Процесс работы с последними такой же, просто они вложены внутрь первых. Давайте добавим немного фиктивного контента в наш элемент .content, чтобы было с чем экспериментировать:

<div class='container'>
<div class='page'>
<div class='sidebar'></div>
<div class='content'>

<p>Ad netus sagittis velit orci est non ut urna taciti metus donec magnis
hendrerit adipiscing mauris sit a proin ultrices nibh.</p>

<p>Enim suspendisse ac scelerisque nascetur vestibulum parturient sed mi
dolor eu non adipiscing non neque scelerisque netus ullamcorper sed
parturient integer.Eros dui risus non sodales ullamcorper libero a dis
cubilia a orci iaculis cursus.</p>

<p>Egestas at aliquam a egestas accumsan cum elementum consectetur conubia
tristique eu et vitae condimentum in ante consectetur suscipit a a duis
vestibulum gravida morbi sagittis.Parturient scelerisque facilisis
ullamcorper a a pretium a nisl parturient semper senectus accumsan ipsum
mus scelerisque eget ridiculus.Accumsan dolor a.</p>

<p>Ligula taciti vel primis sit a tincidunt habitant parturient parturient
in parturient ante nulla consectetur sem.Facilisis parturient litora.</p>

</div>
</div>
</div>

У нас есть изображение и несколько абзацев, которые мы можем стилизовать так же, как и наши структурные div'ы. Например, давайте создадим макет в журнальном стиле, плавающий элемент изображения и текст вокруг него. Для этого в таблицу стилей нужно добавить еще несколько правил:

.content {
padding: 20px;
}

.article-image {
float: left;
width: 300px;
height: 200px;
margin-right: 20px;
margin-bottom: 20px;
}

p {
margin-bottom: 20px;
}

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

СКРЫТИЕ ПЕРЕПОЛНЕНИЯ (ДЛЯ КОНТЕНТА)
Hiding Overflow (For Content)

Примеры вложенных макетов можно встретить повсюду. В качестве последнего примера рассмотрим базовую тему комментариев пользователя. У вас есть изображение, плавающий элемент слева от заголовка и текст рядом с ним:

Давайте попробуем создать это в нашем футере. В ваш любимый элемент .column добавьте следующее:

<div class='column'>
<div class='avatar'></div>
<h3 class='username'>Bob Smith</h3>
<p class='comment'>Aptent vel egestas vestibulum aliquam ullamcorper volutpat
ullamcorper pharetra hac posuere a rhoncus purus molestie torquent. Scelerisque
purus cursus dictum ornare a phasellus. A augue venenatis adipiscing.</p>
</div>

.avatar {
float: left;
width: 60px;
height: 60px;
margin: 25px;
border-radius: 40px;
background-color: #D6E9FE;
}

.username {
margin-top: 30px;
}

.comment {
margin: 10px;
overflow: hidden; /* это важно */
}

Это показывает еще один случай использования нашего трюка с overflow: hidden. Наклеив его на наш блок .comment, мы убедились, что текст "горизонтально очищен" (это не технический термин) от плавающего элемента. Без этого последняя строка текста .comment оказалась бы под изображением.

Другими словами, overflow: hidden ломает макет в журнальном стиле из предыдущей секции, но очень полезным образом.

В этой главе мы впервые познакомились с максимально реалистичными макетами веб-страниц. Мы узнали, как размещать плавающие элементы слева и справа, как работать с контентом после плавающего элемента и как сочетать плавающие элементы с техникой центрирования "auto-margin" из урока Блоковая модель в CSS. Эти инструменты нужны нам для создания боковых панелей, сеток и макетов в стиле журнала.

Важно чтоб вы помнили вашу роль в процессе создания сайта. Ваша работа как веб-разработчика заключается в том, чтобы получив красивый дизайнерский эскиз, превратить его в HTML и CSS, которые браузеры могут отобразить конечным пользователям. Плавающие элементы - большой шаг вперед в этом направлении, но эта технология уже устаревает. Ей на смену приходит верстка flexbox.

На следующем уроке мы узнаем дополнительные способы компоновки сложных сайтов с помощью flexbox. Свойства CSS будут новыми, но процесс будет таким же, как и сегодня: мы по-прежнему будем выравнивать блоки внутри других блоков, внутри других блоков и так далее, пока не добьемся желаемого макета.

HTML & CSS IS HARD - НА РУССКОМ

FLOATS