Увод у својство 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;
}

Узмите дугачак текст. Убаците на почетак текста једну слику, а у средину - другу. Направите тако да прва слика плута лево, а друга - десно.