CSS-də float xüsusiyyətinə giriş

Tutaq ki, uzun mətnlə dolu bir div-imiz var. Gəlin bu mətnin əvvəlinə bir şəkil əlavə edək:

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

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

Результат:

Gördüyünüz kimi, şəklin alt hissəsi mətnin ilk sətrində yerləşir, qalan hissəsi isə yuxarıya doğru çıxır. Şəklin sağ tərəfində geniş boş yer yaranır. Gəlin elə edək ki, mətn bu boş yeri doldursun. Bunun üçün şəklə float xüsusiyyətini və onun left qiymətini təyin edək:

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

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

Результат:

Beləliklə, indi şəkil solda üzür, mətn isə onun ətrafında, müvafiq olaraq sağdan axır. Bu zaman şəklin yan tərəfindəki boş yer yox oldu.

Şəkli solda deyil, sağda üzdürmək olar. Bunun üçün float xüsusiyyətini right qiymətinə təyin edin:

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

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

Результат: