float: обтекание небольшого блока текстом
Float позволяет окружающему строчному содержимому обтекать элемент. Это полезно для иллюстрации внутри статьи, когда текст должен идти рядом, а затем продолжаться под ней.
Назначение
Float позволяет окружающему строчному содержимому обтекать элемент. Это полезно для иллюстрации внутри статьи, когда текст должен идти рядом, а затем продолжаться под ней.
Как это работает
Плавающий блок смещается к указанной стороне и влияет на доступную длину строк. Display:flow-root у контейнера создаёт новый блочный контекст форматирования и помогает включить плавающий элемент в высоту контейнера.
Пример
<style>.story{display:flow-root;border:1px solid #adc4b6;padding:1rem}.story .illustration{float:left;width:7rem;max-width:45%;margin:0 1rem .5rem 0;padding:1rem;box-sizing:border-box;background:#dcefe3}</style>
<div class="story"><div class="illustration">Схема</div><p>Короткая иллюстрация сопровождает объяснение. Текст огибает её сбоку, пока высота строк не превысит высоту блока. Затем строки снова занимают доступную ширину контейнера.</p></div>Что должно получиться
На достаточно широком окне часть текста располагается справа от схемы. Рамка контейнера охватывает и текст, и плавающий блок. При сужении пространства результат зависит от длины слов и размеров схемы.
Граница применения и частая ошибка
Float не стоит использовать как основной инструмент для сетки карточек или панели приложения: для этого обычно яснее Grid и Flexbox. Нельзя рассчитывать на удобное обтекание, если изображение занимает почти всю узкую строку.
Самостоятельная проверка
Увеличьте высоту схемы и сократите текст до одного предложения. Сравните контейнер с flow-root и без него. На узком окне отключите float медиазапросом и оцените читаемость последовательного расположения.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.