Обтекание одного блока другим: полное руководство

Обтекание одного блока другим - классический приём в веб-дизайне, который позволяет тексту или другим элементам располагаться вокруг заданного объекта (например, изображения или цитаты). В этой статье разберём, как называется этот эффект, и покажем все современные способы его реализации с помощью CSS.

Как называется эффект обтекания в CSS?

В веб-разработке такой приём называется float (плавающий элемент) или обтекание текстом. Изначально свойство float создавалось именно для обёртывания текста вокруг изображений, как в газетах. Сегодня для этих целей также используют shape-outside и современные раскладки flex и grid.

Способы сделать обтекание блока

1. Свойство float

Самый простой и старый способ - задать блоку float: left или float: right. Текст автоматически начнёт обтекать его с противоположной стороны.

<div style="float: left; width: 200px; margin-right: 15px;">Блок</div>
<p>Текст обтекает этот блок слева.</p>

Важно: после плавающего элемента нужно очищать поток с помощью clearfix или свойства clear.

2. Свойство shape-outside

Для более сложных форм (круг, многоугольник) используйте shape-outside. Оно работает только с плавающими элементами и позволяет тексту обтекать не прямоугольник, а произвольную фигуру.

<img src="photo.jpg" style="float: left; shape-outside: circle(50%);">

3. CSS Grid и Flexbox

Хотя float остаётся стандартом для обтекания текстом, современные раскладки могут имитировать этот эффект. Например, с display: grid можно разместить блок и текст в соседних колонках, а текст настроить так, чтобы он занимал несколько строк.

.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 15px;
}

Однако настоящего обтекания (когда текст заходит под блок) с grid или flex добиться сложно - для этого лучше использовать float.

Пошаговая инструкция: обтекание картинки текстом

• Шаг 1. Разместите изображение или блок перед текстом в HTML.
• Шаг 2. Добавьте CSS: img { float: left; margin-right: 20px; }.
• Шаг 3. Если нужно обтекание справа - используйте float: right и margin-left.
• Шаг 4. Для нестандартной формы примените shape-outside: circle() или polygon().
• Шаг 5. После обтекаемого блока добавьте элемент с clear: both, чтобы следующий контент не прилипал.

Частые ошибки и их решение

Ошибка: блок обтекается, но следующий элемент тоже прижимается к нему.
Решение: добавьте <div style="clear: both"></div> или задайте родителю overflow: hidden.

Ошибка: текст не обтекает блок с shape-outside.
Решение: убедитесь, что элемент имеет float и явно заданные размеры (width/height).