CSS — как сделать, чтобы родительский элемент вмещал в себя дочерние элементы

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

Это очень неудобно, когда родительский блок у нас, скажем, содержит цветовой фон, который мы хотели бы распространить под все блоки, которые в нем находятся.

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

Один из простейших приемов — это использование псевдоэлемента ::after, который служит для вывода контента после содержимого основного контейнера.

Например, родительский элемент у вас имеет название класса main.

В этом случае добавляем в таблицу стилей следующий код:

Пояснения:
content — это содержимое, которое выводится после основного элемента main;
clear — предотвращает обтекание;
display: block — указываем, что контейнер должен отображаться как блок;
height — устанавливаем нулевую высоту элемента.

Элемент after выводится после вывода содержимого контейнера main, то есть после вывода всех его дочерних элементов, при этом сам контейнер main должен занимать место от своего начала и до after, то есть он растянется так, как нам и нужно.

Добавьте комментарий