CSS-ում float հատկության ներածություն

Ենթադրենք ունենք div երկար տեքստով: Եկեք տեքստի սկզբում տեղադրենք նկար.

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

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

Ինչպես տեսնում եք, նկարի ներքևի մասը տեղակայված է տեքստի առաջին տողում, իսկ մնացած մասը բարձրանում է վերև: Նկարի աջ կողմում մեծ դատարկ տարածք է ստեղծվում: Եկեք անենք, որ տեքստը լրացնի այդ դատարկ տարածքը: Դրա համար նկարին կտանք float հատկությունը left արժեքով.

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

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

Այսպիսով, այժմ նկարը լողում է ձախից, իսկ տեքստը հոսում է նրա շուրջը համապատասխանաբար աջից: Ընդ որում նկարի կողքին գտնվող դատարկ տարածքը վերանում է:

Կարելի է ստիպել, որ նկարը լողա ոչ թե ձախից, այլ աջից: Դրա համար float հատկությունը կդնենք right արժեքով.

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

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

Վերցրեք երկար տեքստ: Տեքստի սկզբում տեղադրեք մի նկար, իսկ մեջտեղում՝ մեկ այլ նկար: Կատարեք այնպես, որ առաջին նկարը լողա ձախից, իսկ երկրորդը՝ աջից: