Код примера предельно прост:

<p>
  <img src="./assets/images/image.svg" alt="Just image">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic commodi maiores excepturi dolore cupiditate sit obcaecati,
  repellat doloribus rerum! Dicta eius aliquid eaque sed sequi obcaecati debitis quos veniam placeat.
</p>
<p>
  Itaque voluptates eum nihil minima quo iure voluptas, atque amet molestias, perspiciatis sed cupiditate nemo inventore velit
  soluta iste ut nesciunt! Qui fuga nesciunt accusantium magnam officiis corrupti, quibusdam amet.
</p>
<p>
  Soluta, laudantium in. Dolorem laboriosam nobis nihil iste eum sapiente maxime, facilis minus atque debitis corporis quasi,
  molestias delectus magni placeat ipsum iure perspiciatis doloremque repudiandae rem tenetur, in dolorum.
</p>

Как видите, картинка стала частью первой строки текста. Нам редко нужно, чтобы поведение было именно таким. Чаще нам необходимо сделать так, чтобы картинка обтекалась текстом. Для этого существует свойство float.

Добавим к нашему примеру float: left и посмотрим, что получится

img {
  float: left;
}

Здесь мы видим, что картинка стала обтекаться текстом. Правда, из-за того, что текста много, мы не видим одного подводного камня этого решения.

Давайте уберём последние два абзаца и посмотрим, что будет

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

Для того, чтобы исправить подобное поведение, нужно воспользоваться "очисткой" — clear. Изменим наш код следующим образом:

<p>
  <img src="./assets/images/image.svg" alt="Just image">
  Lorem ipsum dolor...
</p>
<div class="clear"></div>

img {
  float: left;
}
.clear {
  clear: both;
}

Как видите, абзац, который вы сейчас читаете, находится уже за пределами примера. Добавив такой чистящий элемент в самый конец родительского контейнера, мы смогли вернуть высоту контейнера к нормальному уровню.

В предыдущих примерах мы увидели, как задать обтекание картинки текстом так, чтобы картинка оказалась слева.Точно так же мы можем обтекать её и с другой стороны.

img {
  float: right;
}

И если мы не уверены, что текста будет достаточно, не забудем добавить в конец контейнера clear: both.

img {
  float: left;
}
.clear {
  clear: both;
}

<p>
  <img src="./assets/images/image.svg" alt="Just image">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic commodi maiores excepturi dolore cupiditate sit obcaecati,
  repellat doloribus rerum! Dicta eius aliquid eaque sed sequi obcaecati debitis quos veniam placeat.
</p>
    

Подведём итоги. Для того, чтобы вставить картинку в текст и сделать так, чтобы она обтекалась, нужно воспользоваться свойством