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;
}

აიღეთ გრძელი ტექსტი. ტექსტის დასაწყისში ჩასვით ერთი სურათი, ხოლო შუაში - მეორე. გახადეთ ისე, რომ პირველი სურათი მარცხნივ ტივტივებდეს, ხოლო მეორე - მარჯვნივ.