Прежде всего, индивидуальные боксы элементов располагаются в зависимости от содержимого элементов, затем добавляя какой-нибудь padding, border и margin вокруг них - это опять-таки боксовая модель, которую мы рассмотрели ранее.

По умолчанию содержимое элемента уровня блока составляет 100% от ширины его родительского элемента и столь же высок, как и его содержимое. Строчные элементы высоки и широки, как их содержимое. Вы не можете установить ширину или высоту на строчные элементы — они просто находятся внутри содержимого элементов блочного уровня. Если вы хотите контролировать размер строчного элемента вам нужно настроить его так, чтобы он себя вёл как элемент блочного уровня при помощи display: block; (или даже, display: inline-block;, который смешивает характеристики обоих.).

Это объясняет отдельные элементы, но как насчёт того, как элементы взаимодействуют друг с другом? Нормальный поток макета (упомянутый в статье введения макета) - это система, посредством которой элементы размещаются внутри окна просмотра браузера. По умолчанию элементы уровня блока выкладываются в направлении, что блокирует отображение в режиме записи документа - каждый из них будет отображаться в новой строке ниже последней строки, и они будут разделены любым полем, установленным на них. Поэтому на английском языке или на любом другом, в котором режим писания горизонтальный, сверху вниз, элементы уровня блока располагаются вертикально.

Строчные элементы ведут себя по-другому — они не появляются на новых строках; они располагаются на той же строке, что и другие и любой смежной или завёрнутый текст располагается на всю ширину внутри элемента уровня родительского блока, до тех пор, пока не закончится пространство. Если пространства нет, тогда текст и/или элементы перейдут на новую строку (не с абзаца).

Если два смежных элемента имеют заданные для них поля/внешние отступы (margin) и эти поля соприкасаются друг с другом, большее из них остаётся, а меньшее исчезает — это называется схлопывание полей (margin collapsing), и мы рассматривали это ранее.

Давайте посмотрим на пример, который объясняет всё из того, что мы рассмотрели в данной статье:

<h1 >Базовый поток документа</h1>



<p >
Я базовый элемент уровня блока. Мои соседние блочные элементы находятся на
новой строке подо мной.
</p>



<p >
По умолчанию мы охватываем 100% ширины нашего родительского элемента, и мы так
же высоки, как и наш child-контент. Наша общая ширина и высота - это наш
контент + внутренний отступ (padding) + ширина / высота границы.
</p>



<p >
Мы отделены нашими полями. Из-за схлопывания полей мы отделены шириной одного
из наших полей, а не обоих
</p>



<p >
Строчные элементы <span >такие как этот</span> и  и <span >этот</span> находятся на
одной линии с другими, и смежным текстом, если есть пространство. Строчные
элементы, что не влезают
 находятся на
одной линии с другими, и смежным текстом, если есть пространство. Строчные
элементы, что не влезают
<span >переходят на новую строку если это возможно (как этот текст)</span>если
же это невозможно, они переходят на новую строку, как это изображение:
если
же это невозможно, они переходят на новую строку, как это изображение:
<img src="long.jpg" ></img>

</p>

body {
width: 500px;
margin: 0 auto;
}

p {
background: rgba(255, 84, 104, 0.3);
border: 2px solid rgb(255, 84, 104);
padding: 10px;
margin: 10px;
}

span {
background: white;
border: 1px solid black;
}

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