Как сделать картинки обтекаемые текстом css

Чтобы сделать картинки обтекаемыми текстом в CSS, можно использовать свойство float. Это свойство выравнивает элемент по левому или правому краю контейнера и позволяет тексту обтекать этот элемент.

HTML:

<div class="container">
  <img src="image.jpg" alt="Картинка">
  <p>Текст, который должен обтекать картинку...</p>
</div>

CSS:

img {
  float: left; /* или right, чтобы выровнять элемент по правому краю */
  margin-right: 20px; /* опционально: задает отступ справа от картинки */
}

В этом примере мы создали контейнер div с классом container и поместили в него картинку и абзац с текстом, который должен обтекать картинку.

Затем мы применили стиль к элементу img, задав значение float: left. Это выравняет картинку по левому краю контейнера и позволит тексту обтекать ее слева.

Желательно задать отступ справа от картинки, чтобы текст не прилипал к ней тесно. Это можно сделать с помощью свойства margin-right, как в примере выше.

Также обратите внимание, что для корректной работы обтекания текстом необходимо, чтобы картинка не была слишком большой. Если картинка слишком широкая, ее можно обрезать с помощью свойства clip-path или задать фиксированный размер, чтобы вместилась на страницу.