CSS-ում clear հատկության միջոցով լողացումը չեղարկելը

Նման խնդիրը լուծելու համար գոյություն ունի հատուկ հատկություն՝ clear, որը չեղարկում է լողացումը: left արժեքը չեղարկում է ձախից լողացումը, right արժեքը՝ աջից, իսկ both արժեքը՝ երկու կողմից: Այս արժեքն է որ առավել հաճախ է օգտագործվում:

Այսպիսով, clear հատկությունը չեղարկում է լողացումը: Մեր դեպքում դա մեզ կթույլատրի անել այնպես, որ առաջին div-ի լողացող նկարը չծածկի երկրորդ div-ը:

Այս դեպքում clear-ը պետք է տալ այն տարրին, որի վրա լողացող տարրերը չպետք է ծածկեն, այսինքն՝ մեր դեպքում այն արժե տալ երկրորդ div-ին:

Եկեք անենք դա՝ երկրորդ div-ին տանք parent դասի հետ մեկտեղ նաև clearfix դասը և այս նոր դասի համար սահմանենք clear հատկությունը both արժեքով՝ նկարի ծածկումը կվերանա:

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 անվանումը համընդհանուր ընդունված է, ուստի հետագայում օգտագործեք հենց այն: