Введення у властивість 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;
}

Візьміть довгий текст. Вставте на початок тексту одну картинку, а в середину - іншу. Зробіть так, щоб перша картинка плавала ліворуч, а друга – праворуч.