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

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

Css-свойства float: left | right и position: absolute | fixed (но не position: relative) вытаскивают элемент из нормального потока и отображают его в соответствии с этими правилами. Это означает, что блок больше не будет оказывать влияния на соседние по разметке элементы из нормального потока: не будет отталкивать их с помощью margin‘ов и не будет занимать места в потоке (визуально это может выглядеть как наложение одного слоя на другой).

В простейшем случае элементы распологаются на странице согласно их CSS-свойству display, имеющему какое-то значение по-умолчанию для каждого элемента. Иначе говоря, блочные элементы отображаются с новой строки а строчные на одной строке. Все распологается по принципу “сверху вниз”. Например, в блочном контексте форматирования элементы располагаются так, как указано на изображении:

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

Требуется обратить внимание, что плавающий блок, не смотря на то, что находится вне нормального потока, все ещё может взаимодействовать с нормальным потоком с помощью css-свойства clear. Подробнее это хорошо описано в статье «Block formatting context».

Оригинал статьи доступен по ссылке.