Описываются потоки Web документов при отображении в браузерах. Потоки — это основа для понимания грамотной верстки Web документов.
Любой HTML документ отображается в браузере в соответствии с определенными правилами. На эти правила влияют последовательность элементов в коде страницы и свойства этих элементов. На основе эти правил браузер последовательно и методично выводит каждый элемент документа. Порядок отображения элементов на странице и называют потоком.
Существует несколько потоков вывода HTML элементов. В каком потоке выводить элемент браузер определяет, как уже было сказано, по свойствам этих элементов. Перечислим возможные потоки документа:
- нормальный поток(normal flow);
- плаващий(float);
- абсолютное позиционирование(absolute positioning)
Чуть позже вы поймете, почему схемы размещения так называются, а пока приступим к разъяснениям.
Нормальный поток HTML документа
Основной поток документа называется нормальным потоком. С него и начнем.
По умолчанию элементы выводятся в основном потоке, лишь при задании специальных свойств элемент будет выведен из основного потока документа, т.е. он будет размещаться на странице и взаимодействовать со своими соседями по другим правилам. В нормальном потоке блочные элементы документа выводятся друг под другом, каждый на новой строке полностью ее занимая. Порядок вывода, например, на экран определяется порядком, в котором они написаны в коде HTML документа. Строчные элементы, у которых общий контейнер выводятся последовательно друг за другом в одной строке, если строка заканчивается(например, ограничена шириной родительского контейнера), строчный элемент переходит на строку ниже продолжая вывод.
Элемент выводится из нормального потока, если у него задано одно из следующих свойств:
- float:left,
- float:right;
- position:absolute;
- position:fixed.
Float поток документа
Если элементу установить свойство float:left или float:right, он будет выведен из нормального потока HTML документа и размещен в соответствии со следующими правилами позиционирования плавающих элеменов.
Элемент выводится из нормального потока элементов и смещается в крайнее положение влево (если установлено float:left) или вправо (если установлено float:right) до края родительского контейнера или пока не встретит край такого же плавающего элемента. Т.к. элемент выведен из нормального потока, то для блочных элементов нормального потока такие элементы перестают существовать. Но для строчных элементов нормального потока плавающие не пропадают, строчные элементы начинают огибать плавающие элементы по одной из их сторон.
Поток с абсолютным позиционированием
Если элементу установить свойство position:absolute, он будет выведен из нормального потока(т.е. не будет влиять на своих соседей) и будет размещаться в соответствии с правилами абсолютного позиционирования, которые гласят.
Элемент смещается относительно своих координат в родительском контейнера на величину, заданную CSS свойствами top bottom left right. Все элементы нормального потока, как блочные, так и строчные, не знают о существовании элементов с абсолютным позиционированием.
Частным случаем абсолютного позиционирования считается элемент со свойством position:fixed. Такой элемент выводится из нормального потока, как и абсолютно позиционированный, но смещается относительно края документа CSS свойствами top bottom left right. Такой элемент не меняет своего положения относительно края документа при скроллинге, т.е. он фиксируется в окне браузера в своих координатах. Это и отличает его от элемента с position:absolute.