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

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

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

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

cssdiv {
  border: 1px solid red;
}

Результат:

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

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

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

Результат:

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

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

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

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

Результат: