CSS-de float ülňüsine giriş

Göni, bizde uzyn tekstli bir divimiz bar bolsun. Gelň, bu tekstyň başyna bir surat goýalyň:

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

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

Результат:

Görşüňiz ýaly, suratyň aşagy tekstyň birinji setirinde ýerleşýär we galan bölegi ýokaryk çykýar. Suratyň sag tarapynda uly boş ýer döreýär. Gelň, tekst şol boş ýeri doldursyn. Bunuň üçin surata float ülňüsini left bahasynda bereliň:

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

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

Результат:

Indi, surat çepde üzýär we tekst ony sagdan aýlaw edýär. Bu ýagdaýda suratyň gapdalyndaky boş ýer ýok boldy.

Suraty çepde däl-de, sagda üzdürip bolýar. Bunuň üçin float ülňüsini right bahasynda beriň:

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

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

Результат: