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

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

<div>
	<img src="img.png" alt="">
	длинный текст
</div>

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

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

<div>
	<img src="img.png" alt="">
	длинный текст
</div>

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

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

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

<div>
	<img src="img.png" alt="">
	длинный текст
</div>

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

Возьмите длинный текст. Вставьте в начало текста одну картинку, а в середину - другую. Сделайте так, чтобы первая картинка плавала слева, а вторая - справа.