Введение в свойство float в CSS

Пусть у нас есть див с каким-то длинным текстом. Давайте вставим в начало этого текста картинку:

html<div>
  <img src="img.png" alt="">
  some long text
</div>

cssdiv {
  width: 400px;
  text-align: justify;
}

Результат:

Как вы видите, низ картинки располагается на первой строке текста, а остальная часть уходит вверх. Справа от картинки получается большое пустое пространство. Давайте сделаем так, чтобы текст заполнил это пустое пространство. Для этого картинке поставим свойство float в значении left:

html<div>
  <img src="img.png" alt="">
  some long text
</div>

cssdiv {
  width: 400px;
  text-align: justify;
}
img {
  float: left;
}

Результат:

Итак, теперь картинка плавает слева, а текст обтекает ее соответственно справа. При этом пустое пространство сбоку от картинки исчезло.

Можно заставить картинку плавать не слева, а справа. Для этого float установим в значение right:

html<div>
  <img src="img.png" alt="">
  some long text
</div>

cssdiv {
  width: 400px;
  text-align: justify;
}
img {
  float: right;
}

Результат: