CSS-də clear xassəsi ilə əhatədən çıxma

Belə bir problemin həlli üçün xüsusi clear xassəsi mövcuddur, hansı ki, əhatədən çıxır. left dəyəri soldan əhatədən çıxır, right dəyəri - sağdan, və both dəyəri - hər iki tərəfdən. Bu dəyər ən çox istifadə olunur.

Beləliklə, clear xassəsi əhatədən çıxır. Bizim vəziyyətimizdə bu, birinci div-dən üzən şəklin ikinci div-in üzərinə düşməməsini təmin etməyə imkan verəcək.

Eyni zamanda, clear üzən elementlərin üstünə düşməməli olduğu elementə verilməlidir, yəni bizim vəziyyətimizdə onu ikinci div-ə vermək lazımdır.

Gəlin bunu edək - ikinci div-ə parent sinfi ilə yanaşı clearfix sinfini də verək və bu yeni sinif üçün clear xassəsini both dəyərində təyin edək - şəklin üst-üstə düşməsi yox olacaq:

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

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

.clearfix {
	clear: both;
}

clearfix adı ümumi qəbul edilmişdir, ona görə də gələcəkdə məhz ondan istifadə edin.