Решение проблемы переполнения контейнера с float в CSS

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

Для того чтобы контейнер, внутри которого находятся элементы с float, корректно отображал свою высоту, можно использовать свойство overflow: hidden; или метод clearfix. Проще всего применить overflow:

.container {
  overflow: hidden;
}

Более надежным методом является применение clearfix:

.container::after {
  content: "";
  display: block;
  clear: both;
}

Добавьте следующий код к вашему контейнеру:

<div class="container">
  <!-- Здесь могут находиться ваши элементы с float -->
</div>

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

Особенности плавающих элементов

Float можно уподобить школьнику, который живет по своим правилам и отстранен от общего порядка. Он идеален для создания обтекания текстом изображений или выравнивания элементов в строку. Как и настоящий бунтарь, float остается вне общего потока документа, тем самым создавая элементы с особым поведением, напоминающим inline-block.

Альтернативы float для нового поколения

В XXI веке можно обойтись без использования float, заменив его на flexbox или CSS Grid. Эти технологии предоставляют больше возможностей для гибкого макетирования и избавляют от нужды применения малоприятных трюков.

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

Спасение утопающих контейнеров

Часто применяется метод с clear:both;, подразумевающий добавление дополнительного элемента для очистки:

<div style="clear:both">
  <!-- Элемент очистки -->
</div>

Однако нет необходимости перегружать HTML-код. Лучше выбрать метод overflow:hidden; или overflow:auto;, или использовать силу clearfix для организации макета.

Продвиженные способы контейнмент

В тех случаях, когда требуется применить float для элементов определенного размера и формата, overflow:auto; может стать идеальным решением. Классы с автоочисткой помогут облегчить CSS:

.self-clear::after {
  content: "";
  display: table;
  clear: both;
}

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

Ниже изображены контейнеры до и после применения float, а также с использованием clear:

Контейнер до применения float:        Контейнер после применения float:
[ ]                                   [🎈]
[🎈]                 🎈🎈🎈               [ ]
[ ]                                   [ ]

С применением float clear:

Контейнер с применённым float CLEAR:
[🎈]
[🎈]
[  ]

Таким образом, float словно поднимает в воздух элементы 🎈, а clear предотвращает схлопывание контейнера.

Влияние плавающих элементов на макет

Сочетание float и контейнера

Устанавливайте минимальную высоту контейнера, чтобы гарантировать оптимальное отображение сайта при использовании float. Если ваш дизайн с правой стороны выглядит неорганично, используйте float для выравнивания внутренних элементов вдоль правого края. Еще не готовы отказаться от старой методики? Попробуйте использовать flex-дизайн.

.outer-container {
  display: flex;
}

Адаптивность с помощью float

Настройте ширину и высоту внутренних div, чтобы обеспечить гармоничную адаптивную раскладку. Flexbox поможет создать более эффективный и меньше проблематичный контейнер.

Отладка с помощью float

Возникли проблемы с внешними отступами или с соседними элементами, которые были вытеснены при помощи float? Воспользуйтесь такими инструментами как jsFiddle для визуализации и перенастройки свойств, чтобы избежать неожиданностей при работе с float.

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

1. The Clearfix: Force an Element To Self-Clear its Children | CSS-Tricks
2. clear – CSS: Cascading Style Sheets | MDN
3. CSS Layout – float and clear
4. A Complete Guide to Flexbox | CSS-Tricks
5. html – How do you keep parents of floated elements from collapsing? – Stack Overflow
6. The Mystery Of The CSS Float Property — Smashing Magazine
7. CSS Floats 101 – A List Apart