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

Чтобы сделать обтекание картинки текстом в CSS, можно использовать свойство «float». Свойство «float» размещает элемент внутри контейнера в зависимости от указанного значения: left, right, none или inherit.

Пример использования для обтекания картинки текстом:

HTML:

<div class="container">
  <img src="image.jpg" alt="image">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget quam consequat, euismod elit eu, sodales lacus. Donec suscipit rutrum justo porta dapibus. Nulla facilisi. Phasellus eu metus efficitur, dictum justo non, consequat nibh. Praesent purus mauris, accumsan in porta vel, aliquam at mi.</p>
</div>

CSS:

img {
  float: left;
  margin-right: 10px;
}

Здесь мы задаем значение «float: left;» для картинки, чтобы она обтекала текст справа. А со свойством «margin-right: 10px;» мы добавляем отступ справа, чтобы текст не прилипал к картинке.

Чтобы обтекание работало корректно, картинка должна идти до текста в коде, иначе не будет обтекания.

Также можно использовать значение «float: right;» для обтекания текстом слева от картинки.