Поток документа

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

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

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

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

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

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

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

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

Свойство block в CSS

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

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

Свойство inline в CSS

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

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

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

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

Свойство float в CSS

Мы учим программированию с нуля до стажировки и работы. Попробуйте наш бесплатный курс «Введение в программирование» или полные программы обучения по Javascript, PHP, Python и Java.

Хекслет

Подробнее о том, почему наше обучение работает →