Anulimi i mbivendosjes me pronën clear në CSS

Për zgjidhjen e një problemi të tillë ekziston një pronë e veçantë clear, e cila anulon mbivendosjen. Vlera left anulon mbivendosjen nga e majta, vlera right - nga e djathta, ndërsa vlera both - nga të dyja anët. Kjo vlerë përdoret më së shpeshti.

Pra, pronja clear anulon mbivendosjen. Në rastin tonë, kjo do të na lejojë të bëjmë në mënyrë të tillë që imazhi lundrues nga div-i i parë të mos kalojë mbi div-in e dytë.

Në këtë rast, clear duhet t'i jepet atij elementi, mbi të cilin nuk duhet të kalojnë elementët lundrues, domethënë në rastin tonë, ia vlen t'i jepet div-it të dytë.

Le ta bëjmë këtë - t'i japim div-it të dytë përveç klasës parent edhe klasën clearfix dhe për këtë klasë të re të caktojmë pronën clear me vlerën both - mbivendosja e figurës do të zhduket:

<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;
}

Emri clearfix është i pranuar përgjithësisht, prandaj në të ardhmen përdorni pikërisht atë.