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

Нека имаме див с някакъв дълъг текст. Нека вмъкнем в началото на този текст изображение:

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

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

Както виждате, долната част на изображението се разполага на първия ред от текста, а останалата част излиза нагоре. Вдясно от изображението се получава голямо празно пространство. Нека направим така, че текстът да запълни това празно пространство. За това на изображението ще зададем свойство float със стойност left:

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

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

И така, сега изображението плава отляво, а текстът го обгражда съответно отдясно. При това празното пространство отстрани на изображението изчезна.

Можем да накараме изображението да плава не отляво, а отдясно. За това float ще зададем на стойност right:

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

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

Вземете дълъг текст. Вмъкнете в началото на текста едно изображение, а в средата - друго. Направете така, че първото изображение да плава отляво, а второто - отдясно.