კლიარფიქსი და მშობელის სიმაღლე CSS-ში

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

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

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

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

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

რადგან დივ-კლიარფიქსს ენიჭება თვისება clear, მაშინ მოხდება ის, რომ ის სურათის მიერ ქვემოთ დაიწევს და მის ქვეშ იდგება, ამას კი მოყვება მშობელის სიმაღლის გაზრდა.

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

მაშ, მოდით ვცადოთ:

<div class="parent">
	<img src="img.png" alt="">
	<div class="clearfix"></div>
</div>

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

.clearfix {
	clear: both;
}