CSS-de float ülňüsine giriş

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

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

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

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

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

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

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

Uzyn tekst alyň. Tekstyň başyna bir surat, ortasyna bolsa beýleki suraty goýuň. Birinji suratyň çepde, ikinji suratyň bolsa sagda üzýändigini ediň.