ტექსტი CSS-ში ფლოატების მშობელში

მოდით, ავშალოთ თვისება height div-სთვის და დავსვათ მცირე ტექსტი სურათის წინ.

ამ შემთხვევაში, ჩვენი div-ის სიმაღლე იქნება ტექსტის სიმაღლის ტოლი, ხოლო სურათი კვლავ გამოვა div-ის გარეთ:

<div>
	ტექსტი
	<img src="img.png" alt="">
</div>

div {
	border: 1px solid red;
}
img {
	float: right;
}

მოდით დავსვათ ტექსტი სურათის შემდეგ - შედეგი არ შეიცვლება:

<div>
	<img src="img.png" alt="">
	ტექსტი
</div>

div {
	border: 1px solid red;
}
img {
	float: right;
}

მოდით გავაკეთოთ ისე, რომ სურათი ტყვია მარცხენა კიდეზე - შედეგი ანალოგიური იქნება:

<div>
	<img src="img.png" alt="">
	ტექსტი
</div>

div {
	border: 1px solid red;
}
img {
	float: left;
}

მოდით ქვემოთ დავამატოთ კიდევ ერთი div - სურათი მასზეც ავა:

<div>
	<img src="img.png" alt="">
	ტექსტი
</div>
<div>
	ტექსტი
</div>

div {
	border: 1px solid red;
}
img {
	float: left;
}

თუ პირველ div-ში იმდენად ბევრი ტექსტი დაემატება, რომ სიმაღლეში ის სურათზე დიდი გახდება - ის მეორე div-ზე აღარ ავა:

<div>
	<img src="img.png" alt="">
	some long text
</div>
<div>
	ტექსტი
</div>

div {
	text-align: justify;
	border: 1px solid red;
}
img {
	float: left;
}

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