Uvod u float svojstvo u CSS-u

Recimo da imamo div sa nekim dugim tekstom. Hajde da na početak ovog teksta ubacimo sliku:

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

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

Kao što vidite, dno slike se nalazi na prvom redu teksta, a ostatak ide naviše. Desno od slike se pojavljuje veliki prazan prostor. Hajde da učinimo da tekst popuni ovaj prazan prostor. Da bismo to uradili, slici ćemo postaviti svojstvo float u vrednost left:

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

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

Dakle, sada slika pluta levo, a tekst je oblaže u skladu sa tim s desne strane. Pored toga, prazan prostor sa strane slike je nestao.

Možemo da nateramo sliku da pluta ne s leve, već s desne strane. Za ovo float podesimo na vrednost right:

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

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

Uzmite dug tekst. Ubacite na početak teksta jednu sliku, a u sredinu - drugu. Učinite da prva slika pluta levo, a druga - desno.