Uvod v lastnost float v CSS

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

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

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

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

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

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

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

Результат: