Если видео недоступно для просмотра, попробуйте выключить блокировщик рекламы.

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

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

ожидаемо выведет нам друг под другом три фразы: Блок 1, Блок 2, Блок 3. Это достатигается благодаря тому, что браузеры имеют определённые правила, по которым они выводят элементы на экран. Главным свойством блочных элементов является то, что они занимают всю доступную им ширину, благодаря чему все блочные элементы выводятся друг под другом.

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

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

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

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

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

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

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

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

Хекслет

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