Начинаем новую строку после float:left в CSS: решение

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

Чтобы перейти к новой строке после использования float:left;, можно применить свойство clear: both; к последующему элементу. Вот краткий пример:

<div style="float: left;">Преодолеваем течение...</div>
<!-- Сброс float -->
<div style="clear: both;"></div>
<div>Вот и новая строка!</div>

Такой <div> с clear: both; позволит переносять последующий контент на новую строку последующего элемента с использованным обтеканием.

Продвинутые методы сброса обтекания

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

Поддержка порядка сила CSS псевдо-элементов

Без применения дополнительных элементов HTML.

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

Данный код самостоятельно справляется с обтеканием внутри блока .gallery без вмешательства.

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

Использование HTML семантики для лаконичной верстки

Наглядно выделить содержимое на несколько рядов можно с помощью тегов ul и li, организовав список элементов:

<ul class="photos">
  <li><img src="beach.jpg" alt="Пляж"></li>
  <!-- Дополнительные фотографии пляжа -->
</ul>

.photos {
  list-style: none;
  padding: 0;
  width: calc(100% – 10px); /* Предоставляем пространство каждому элементу */
}
.photos li {
  float: left;
  width: calc(16.66% – 10px); /* Немного математики для создания радости */
  margin-right: 10px;
}
.photos li:nth-child(6n+1) {
  clear: both;
}

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

Адаптивность благодаря Flexbox

Flexbox — современное средство для создания адаптивных сеток, которое освобождает от необходимости сброса обтекания элементов с помощью float:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-item {
  width: 16.66%; /* Вспоминаем об удобстве использования калькуляторов */
}

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

Если float:left; строкует ваши лодочки 🚤 в одну линию, то clear:both; служит маяком 🔵, указывающим на всегда свободное место для комфортного перехода к новой строке:

До: 🚤🚤🚤🚤 (Места для новичков нет)

После: 🚤🚤🚤🚤
🔵 (Места предостаточно!)

Рзместите свой маяк сразу после последней лодочки для благополучного начала новой строки:

.clearfix {
  clear: both;
}

Проведите применение его в HTML:

<div class="boat float-left"></div> <!-- Лодка 1 -->
<div class="boat float-left"></div> <!-- Лодка 2 -->
<div class="clearfix"></div> <!-- Тут наш маяк -->
<div class="boat float-left"></div> <!-- Открыта новая строка, кто тут? -->

Особенности использования и решение распространенных проблем

Проблема наложения элементов

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

Трудности взаимодействия со старыми технологиями

На устаревших ресурсах, там где иная помощь не нужна, приходится вернуться к классическому методу и использовать тег br с применением свйоства clear="all":

<br clear="all" /> <!-- Когда старый добрый классический подход несравнен! -->

Отсутвие адаптивности

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

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

1. Как очищать флоаты (clearfix) — как избежать плавающего беспорядка используя .clearfix.
2. Всё о float | CSS-Tricks — всестороннее руководство по интеграции свойств обтекаемости float.
3. The Clearfix: заставляем элемент очищать себя от плавающих дочерних элементов | CSS-Tricks — объяснение назначения доства clear-fix как способа выхода из сложившейся ситуации.
4. What the Flexbox?! — двигаемся к использованию Flexbox, новейшей альтернативе float.
5. Визуальное руководство по свойствам Flexbox в CSS3 | DigitalOcean — о способах практического применения Flexbox.
6. Очистка флоатов: обзор различных методов clearfix — SitePoint — обзор разнообразных вариаций сброса обтекания и помощь в выборе лушего для вашего проекта варианта.