Просмотров: 2 153

Что такое нормальный поток элементов на веб-странице?

Когда вы добавляете какие-либо элементы на веб-страницу они располагаются в строго определенной последовательности.

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

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

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

<div style="background:#ccc;">Блок 1</div>
<div style="background:#9cc;">Блок 2</div>
<div style="background:#c9c;">Блок 3</div>

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

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

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

Теперь давайте посмотрим, как отображаются строчные элементы в нормальном потоке.

<span style="background:#ccc;">Строчный элемент 1</span>
<span style="background:#9cc;">Строчный элемент 2</span>
<span style="background:#c9c;">Строчный элемент 3</span>

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

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

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

Этот материал входит в соостав курса «Базовые приемы верстки веб-страниц»

К списку всех материалов курса. Доступ можно получить в группе вконтакте, в разделе «Ссылки».