Домашнее задание
Задача: создайте статью с изображением, которое обтекается текстом, и отдельный блок «Старый layout», переписанный на Grid.
1
Статья
Используйте float: left только для изображения внутри текста.
2
Контейнер
Добавьте display: flow-root, чтобы Block Formatting Context учитывал float.
3
Сравнение
Сделайте соседний вариант той же структуры через Grid.
Ориентир: как должно выглядеть
IMG
.article с display: flow-root: картинка float: left, текст обтекает её справа, рамка не схлопывается.
aside
.modern-layout на Grid — та же структура без float и clearfix
📄 lesson-20/homework.css
.article {
display: flow-root; /* BFC: рамка учитывает float */
}
.article__image {
float: left;
margin: 0 1rem 1rem 0;
}
.modern-layout {
display: grid;
grid-template-columns: 16rem 1fr;
gap: 1.5rem;
}