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:

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

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

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

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

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

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

Uzun bir mətn götürün. Mətnin əvvəlinə bir şəkil, ortasına isə başqa bir şəkil daxil edin. Elə edin ki, birinci şəkil solda, ikinci şəkil isə sağda üzsün.