Поток документа — CSS: Позиционирование элементов

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

Перед тем, как рассмотреть возможные потоки документа, стоит вспомнить, как выводятся блочные и строчные элементы.

При создании разметки блочные элементы выводятся друг под другом так, как это было указано в HTML-документе. Такая верстка:

<div>Блок 1</div>
<div>Блок 2</div>
<div>Блок 3</div>

ожидаемо выведет нам друг под другом три фразы:

Блок 1
Блок 2
Блок 3

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

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

Помимо блочных элементов в HTML существуют строчные элементы. Главное их отличие в том, что они занимают не всю доступную им ширину, а только ту ширину, которая необходима для отображения контента внутри элемента. Из-за этого несколько идущих подряд строчных элементов будут выведены друг за другом, без переноса строки. Данное поведение также является стандартным для всех браузеров.

Такое поведение можно сравнить с расположением небольших ящиков на полке. Места достаточно, чтобы расположить их в ряд.

Схема, при которой блочные и строчные HTML-элементы выводятся друг за другом в том порядке, в котором они размечены в файле, называется Нормальный поток документа.

С помощью CSS-правил возможно вывести элемент из нормального потока. Существуют еще несколько типов потока документа:

• Плавающий поток. Создается с использованием CSS-свойства float.
• Поток с абсолютным позиционированием. Создается с использованием свойства position: absolute. В следующих уроках мы подробнее его рассмотрим. Сейчас же достаточно знать, что при абсолютном позиционировании элемент выдергивается из потока и его можно разместить в любой части документа.

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