CSS-da float xususiyatiga kirish

Faraz qilaylik, bizda uzun matnli div bor. Keling, ushbu matnning boshiga rasm qo'shaylik:

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

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

Результат:

Ko'rib turganingizdek, rasmning pastki qismi matnning birinchi qatorida joylashgan, qolgan qismi esa yuqoriga chiqib ketadi. Rasmning o'ng tomonida katta bo'sh joy hosil bo'ladi. Keling, matnning ushbu bo'sh joyni to'ldirishini ta'minlaylik. Buning uchun rasmga float xususiyatini left qiymatida beramiz:

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

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

Результат:

Shunday qilib, endi rasm chap tomonda suzadi, matn esa unga mos ravishda o'ng tomondan o'rab oladi. Bunda rashm yonidagi bo'sh joy yo'qoladi.

Rasmni chapda emas, balki o'ngda suzishiga majbur qilish mumkin. Buning uchun float ni right qiymatiga o'rnating:

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

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

Результат: