Клиарфикс және CSS-те ата-ананың биіктігі

Классы parent бір дивті қалдырып, ондағы мәтінді алып тастайық, тек ұшып тұрған суретті ғана қалдырайық. Сіз бұл жағдайда дивтің биіктігі нөлге дейін жиырылатынын білесіз, одан тек жоғарғы және төменгі шекара ғана қалады. Сурет біздің дивтің астынан шығып кетеді:

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

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

Ұшып тұрған сурет біздің дивтің биіктігін арттыратындай етейік. Бұл үшін қуыт әдіс қолданылады - суреттен кейін clearfix класы бар мәтіnsіз див қояйық.

Біздің суретіміз ұшып тұрған элемент болғандықтан ата-ананың биіктігін арттырмайды, бірақ див-клиарфикс - ұшпайтын және ата-ананың биіктігіне әсер етеді.

Див-клиарфикске clear қасиеті берілгендіктен, ол суреттен төмен итеріліп, оның астында тұрады, сонымен бірге ата-ананың биіктігін арттырады.

Див-клиарфикстің өзі бос және экранда көрінбейді, бірақ сонымен бірге ата-ананың биіктігін арттырады.

Ендеше, көрейік:

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