Клиарфикс ва ота-она баландлиги CSS да

Келгила, битта parent синфи билан дивни қолдирамиз, ундан матнни олиб ташлаб, фақат сузувчи расмни қолдирамиз. Сиз билганингиздек, бу ҳолда дивнинг баландлиги нолга айланиб, ундан қолгани фақат юқори ва қуйи чеккаси бўлади. Расм эса бизнинг дивимиздан қуйида чиқиб кетadi:

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

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

Келгила, сузувчи расм бизнинг дивимизни баландликка кенгайтириши учун қилайлик. Бунинг учун ишлатиладиган ақлли усул - расмдан кейин clearfix синфи билан матнсиз дивни қўйамиз.

Бизнинг расмимиз сузувчи элемент бўлиб, ота-онани баландликка кенгайтирмайди, лекин див-клиарфикс - сузувчи эмас ва ота-онанинг баландлигига таъсир қилади.

Чунки див-клиарфиксга clear хусусияти берилган, бунда у расм томонидан pastga итарилиб, унинг ostida туради ва шу билан бирга ота-онани баландликка кенгайтиради.

Див-клиарфикснинг ўзи бўш ва экранда кўринмайди, лекин шу билан бирга ота-онани баландликка кенгайтиради.

Шунинг учун, келгила синаймиз:

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

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

.clearfix {
	clear: both;
}