Светло-серый заголовок (блочный бокс) с большими желтыми margin-ами

Высокий «поплавок»
(float) перед абзацем. Видно, что «поплавки» вообще не участвуют в потоке, перекрывая блочные боксы, но ужимая строчные боксы в них.
Маленький «поплавок» до абзаца.

Первый абзац нормального потока, образует блочный бокс (block box, красная рамка), заполненный внутристрочными* боксами (inline box, синие рамки), выстроенными в строчные боксы (line box, первый строчный бокс выделен розовым фоном).

* С терминологией опять вышла путаница, часто inline box переводят как «строчный бокс», но тогда неясно, как первести «line box». Кстати, вот эта фигня («голый» текст между абзацами) — анонимный блочный бокс, его нельзя красиво выделить стилями, но в остальном он ведет себя подобно абзацу.

«Поплавок» в абзаце.Это второй абзац, тоже блок. Наглядная аналогия: блок — книжный шкаф, строки — полки, внутристрочные блоки — книги на полках.

Нижняя граница зеленого полупрозрачного контейнера показывает, до какого места дошел поток и с какого места браузер сможет размещать новые блоки, как только они появятся. Этот зеленый контейнер не создает отдельного контекста форматирования блоков. [Включить контекст].

Этот абзац уже вне контейнера, но еще в том же контексте.