clear: начало блока ниже плавающих элементов
Clear указывает, с какой стороны блок не должен соседствовать с предыдущими плавающими элементами. Он помогает отделить новый раздел от обтекания, начатого выше.
Назначение
Clear указывает, с какой стороны блок не должен соседствовать с предыдущими плавающими элементами. Он помогает отделить новый раздел от обтекания, начатого выше.
Как это работает
Left учитывает левосторонние float, right — правосторонние, both — обе стороны. Правило действует в соответствующем контексте форматирования и не является общим сбросом любой CSS-раскладки.
Пример
<style>.sample{display:flow-root}.sample .figure{float:left;width:8rem;min-height:7rem;margin-right:1rem;background:#dff2e5}.sample .next{clear:both}</style>
<div class="sample"><div class="figure">Иллюстрация</div><p>Короткое пояснение рядом с ней.</p><h2 class="next">Следующий раздел</h2><p>Этот текст начинается после плавающего блока.</p></div>Что должно получиться
Заголовок следующего раздела переносится ниже иллюстрации, даже если короткое пояснение само по себе закончилось раньше. Обтекание больше не захватывает новый раздел.
Граница применения и частая ошибка
Clear не выравнивает элементы Flexbox или Grid и не исправляет абсолютное позиционирование. Пустой div с clear может скрыть проблему структуры: иногда достаточно flow-root у контейнера или другого способа раскладки.
Самостоятельная проверка
Удалите clear и посмотрите, куда переместится заголовок. Поменяйте float:left на float:right, сравните clear:left и clear:both. Объясните результат без добавления произвольных больших отступов.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.