Решение проблемы с высотой родительского div в CSS

Быстрый ответ

Высота блок-контейнера становится нулевой потому что плавающие внутри элементы выходят из нормального потока документа и при расчете размеров родительского блока не учитываются. Применение приема clearfix и добавление к .clearfix::after свойств content, clear и display позволит родительскому блоку учесть размеры плавающих дочерних элементов:

.clearfix::after {
  content: "";
  clear: both;  /* Указывает, какую сторону (оба) следует очистить от плавания */
  display: block;  /* Создает невидимую опору для родителя */
}

Присвойте класс .clearfix родительскому блоку, чтобы ограничить плавающие элементы внутри:

<div class="clearfix">
  <div style="float: left;">Я плаваю вне потока!</div>
</div>

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

Плавающие элементы и возможности их контроля

На помощь приходит блоковый форматирующий контекст

Блоковый форматирующий контекст – это способ манипулирования плавающими элементами. Применение свойств overflow: hidden, display: inline-block или display: flow-root удерживает плавающие элементы внутри:

.parent {
  overflow: hidden; /* Позволяет родительскому блоку "всегда приходить в форму" */
  display: inline-block; /* Сдерживает плавающие элементы, оставляя их в пределах потока */
  display: flow-root; /* Устанавливает порядок среди дочерних элементов */
}

Подробнее об этом расскажет наш спикер на видео

Влияние элементов, не участников плавания

Любой элемент, не принимающий участие в плавании, будь это псевдоэлемент или HTML-символ, обладает удивительной способностью заставить родительский блок учеть все свои дочерние элементы, независимо от их плавания.

Тонкости использования clearfix

Clearfix больше не тот, кого мы знали раньше. Сегодня он стал более мягким и эффективным благодаря прогрессивным свойствам CSS, например, display: flow-root. Не забудьте проверить, совместим ли он с вашим браузером, прежде чем использовать.

Визуализация

Вообразите родительский блок в виде ящика (🗄️), а плавающие элементы – как воздушные шарики (🎈). Вот короткий рассказ на этот счет:

🗄️: [🎈🎈🎈]
Высота ящика: ❓ (Почему я не могу определить свою высоту?)

Воздушные шарики (🎈) хитрые. Они связаны с ящиком, но вот незадача, они всплывают вверх:

🎈
🎈  (Всплывают, не затрагивая высоту ящика)
🎈
🗄️ (Все еще не может определить свои размеры)

Суть в том, что когда воздушные шарики, подобно плавающим элементам, поднимаются к верху, ящик теряет из виду свой размер и теряет их:

Решение: Применяем очистку плавания!
Ящику нужна силы тяжести (🔽), чтобы понять, что шарики до сих пор здесь.

Когда мы **применяем очистку плавания**:
🗄️🔽[🎈🎈🎈] (Наконец-то ящик осознает свою высоту!)

Глубокое погружение

Исторические заметки и спецификации float

CSS был задуман так, чтобы плавающие элементы были временными, поэтому понимание тонкостей свойства float крайне важно для контроля над макетом.

Современные альтернативы

Забудьте о проблемах с float! Пользуйтесь современными инструментами верстки, такими как Flexbox и Grid, для создания структур, логичных и простых в реализации.

Риски использования float

Не забывайте: overflow: hidden не является универсальной панацеей. Это может обрезать ваш контент, и в реальности это, скорее, хитрый противник, нежели друг.

Поддерживаем ясность мысли с помощью лучших практик

• Когда float ведут себя непредсказуемо, примените методы очистки float, проверенные временем.
• Структурируйте ваш CSS так, чтобы изолировать логику float, и избегите нежелательных сюрпризов.
• Flexbox и Grid предлагают чистые, аккуратные схемы для макетирования — дайте плавающим элементам заслуженный отдых!
• Перед применением той или иной техники обдумайте ее применимость в вашем конкретном случае — каждое решение уникально и имеет свои плюсы и минусы.

Полезные материалы

1. Все о float | CSS-Tricks — подробное описание свойства float и связанных с ним проблем.
2. html – Что такое clearfix? | Stack Overflow — открытые дискуссии сообщества и способы решение проблемы неучитываемой высоты родительского блока.
3. clear – CSS: Cascading Style Sheets | MDN — объяснение принципов работы и примеры использования свойства clear для очистки float.
4. Очищение float: Обзор методов clearfix | SitePoint — руководство по пониманию как очистить плавающие элементы в различных контекстах.
5. Полное руководство по Flexbox | CSS-Tricks — альтернатива плавающим элементам при проектировании макетов с помощью Flexbox.
6. Блоковый форматирующий контекст в CSS | MDN — посвящено блоковому форматирующему контексту и его значении в верстке CSS.
7. CSS – Как очистить float — анализ почему overflow: hidden может быть использован для очистки float и смежные вопросы.