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

დავუშვათ, ახლა გვაქვს div, რომლის შიგნით არის სურათი. Div-ს მივანიჭოთ საზღვარი, ხოლო სურათს ჯერ არ მივანიჭოთ თვისება float.

მოდით ვნახოთ, როგორ გამოიყურება ეს ბრაუზერში:

<div>
	<img src="img.png" alt="">
</div>

div {
	border: 1px solid red;
}

ახლა მივანიჭოთ სურათს თვისება float მნიშვნელობით left. ამ შემთხვევაში მოხდება გასაოცარი რამ - მშობელის სიმაღლე გაქრება, მისი ქვედა საზღვარი დაიწყება დაუყოვნებლივ ზედის შემდეგ, ხოლო სურათი ქვემოთ გამოვა თავისი მშობელიდან:

<div>
	<img src="img.png" alt="">
</div>

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

გამოდის, რომ ელემენტებს, რომლებსაც მინიჭებული აქვთ თვისება float, არ აფართოებენ თავიანთ მშობელს სიმაღლეში.

მოდით თვისებას float left-ის ნაცვლად დავწეროთ მნიშვნელობა right. მშობელის ქმედება არ შეიცვლება, მაგრამ სურათი დაიწყებს მარჯვნივ ცურვას:

<div>
	<img src="img.png" alt="">
</div>

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