Почему элементы внутри div выходят за границы: решение

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

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

/* Внесем несколько строк 'чистого' кода для сохранения плавающих элементов в контейнере */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

Добавив класс .clearfix в div, вы сохраните плавающие элементы внутри него:

<div class="clearfix">
  <!-- Ваши плавающие элементы будут отображаться строго внутри контейнера -->
</div>

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

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

Возьмем образ пристань, где плавающие элементы представлены исполнительно кораблями (🚢), а div – это море:

Пристань (🌊): [🚢, 🚢, 🚢]

Если корабль слишком велик или изменяет свой курс, он может пересечь границы пристани:

Пристань (🌊): [🚢, 🚢]
Сорвавшийся с якоря корабль: [🚢] 🌊🏖️

Чтобы надежно сдерживать корабли для оставания в пределах пристани:

Пристань (🌊⚓️): [🚢, 🚢, 🚢]

Применение современных подходов к макетированию

Техника clearfix заработала себе хорошую репутацию, однако современный CSS предлагает такое решение, как Flexbox и CSS Grid, которые эффективно решают проблемы, связанные с плавающими элементами:

.container {
  /* Великолепие Flexbox в действии */
  display: flex; /* Или 'grid' для решения конкретных задач */
  flex-direction: row; /* Или 'column' для вертикального размещения */
}

Оптимизация макета под любые размеры экранов

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

Ключевое внимание уделяйте доступности: семантический HTML можно сравнить с шрифтом Брайля для веб-сайтов. Сосредоточьтесь на HTTPS для обеспечения безопасности и следуйте современным практикам разработки. И не забывайте об оптимизации производительности: даже небольшое сокращение времени загрузки может существенно улучшить восприятие сайта пользователем.

Возможности будущего: BFC и flow-root

Вы уже знакомы с display: flow-root? В будущем эта конструкция CSS создаст Block Formatting Context (BFC) и сделает технику clearfix неактуальной. Подготовьтесь заблаговременно: пишите модульный код, который будет легко рефакторить:

.container {
  /* Этот поток ведет нас в будущее */
  display: flow-root; /* Защищает от плавающих элементов */
}

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

1. Загадочное свойство CSS Float — Smashing Magazine — Исчерпывающее рассмотрение свойства float и способов его применения.
2. Всё о плавающих элементах | CSS-Tricks — Объяснение принципов работы плавающих элементов и методов их очистки.
3. Как очистить плавающие элементы (clearfix) — W3Schools — Справка по использованию clearfix.
4. Понимание контекста форматирования блоков в CSS — SitePoint — Детальный анализ BFC, которые позволяют сохранять плавающие элементы в пределах родительского контейнера.
5. html – Как избежать схлопывания родителя плавающих элементов? – Stack Overflow — Обсуждение методов, предотвращающих схлопывание родительского блока из-за плавающих элементов внутри него.
6. Как и почему очищать плавающие элементы | CSS-Tricks — Детальный анализ процесса очистки плавающих элементов.
7. Пример на CodePen – Реализация плавающих элементов и clearfix — Живой пример использования плавающих элементов и техники clearfix.