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:

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

css.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.