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

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

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

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

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

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