CSS-i float omaduse sissejuhatus

Oletagem, et meil on div mingi pika tekstiga. Paneme selle teksti algusse pildi:

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

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

Nagu näete, asub pildi alumine osa teksti esimesel real ja ülejäänud osa läheb üles. Pildist paremale jääb suur tühi ruum. Teeme nii, et tekst täidaks selle tühja ruumi. Selleks määrame pildile omaduse float väärtusega left:

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

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

Nüüd pilt hõljub vasakul ja tekst voolab selle ümber vastavalt paremal. Samas pildi kõrval olev tühi ruum kaob.

Pilti saab panna hõljuma mitte vasakul, vaid paremal. Selleks float väärtuseks right:

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

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

Võtke pikk tekst. Pange teksti algusse üks pilt ja keskmesse - teine. Tehke nii, et esimene pilt hõljub vasakul ja teine - paremal.