Uvod u float svojstvo u CSS-u

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

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

cssdiv {
  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:

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

cssdiv {
  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:

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

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

Результат: