Сравни системы раскладки HTML в CSS и объясни их назначение.

Позиционирование элементов

В CSS есть несколько систем раскладки, у каждой своё назначение.

Системы

Обычный поток (flow) — поведение по умолчанию: блоки сверху вниз, строчные элементы в строку. Назначение — текст и документы.
Flexbox — одномерная раскладка: элементы вдоль строки или колонки с гибким распределением места. Назначение — компоненты: меню, тулбары, карточки внутри.
Grid — двумерная раскладка по строкам и колонкам. Назначение — макеты страниц и сетки.
Позиционирование — relative, absolute, fixed, sticky. Назначение — наложения, всплывающие элементы, закреплённые панели.
Float — обтекание текстом. Назначение — картинки в статьях (как способ раскладки устарел).
Multi-column — текст в нескольких колонках, как в газете.
Table layout — для табличных данных (<table>).

.page { display: grid; grid-template-columns: 1fr 3fr; }
.nav { display: flex; gap: 16px; }
.article img { float: left; margin-right: 16px; }

Flow для текста, Flexbox для одномерных компонентов, Grid для двумерных макетов, position для наложений, float и колонки — для текстовых эффектов.