Uvod v lastnost float v CSS

Recimo, da imamo div z daljšim besedilom. V začetek tega besedila vstavimo sliko:

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

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

Kot lahko vidite, se dno slike nahaja na prvi vrstici besedila, preostali del pa gre navzgor. Desno od slike je velik prazen prostor. Naredimo tako, da bo besedilo zapolnilo ta prazen prostor. Za to nastavimo lastnost float na vrednost left:

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

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

Torej, zdaj slika plava levo, besedilo pa jo obdaja z desne. Pri tem je prazen prostor ob strani slike izginil.

Lahko naredimo, da slika plava ne levo, ampak desno. Za to nastavimo float na vrednost right:

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

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

Vzemite daljše besedilo. V začetek besedila vstavite eno sliko, na sredino pa drugo. Naredite tako, da prva slika plava levo, druga pa desno.