CSS-i float omaduse sissejuhatus

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

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

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

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

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

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

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

Результат: