Клиарфикс ва баландии волидайн дар CSS

Биёед як див бо синфи parent гузорем, матнро аз он тоза кунем, фақат тасвири шиноварро гузошта монем. Тавре ки аллакай медонед, дар ин ҳолат баландии див ба сифр коҳиш меёбад, аз он фақат ҳудуди болоӣ ва поёниаш боқӣ мемонад. Тасвир аз поёни диви мо берун мезанад:

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

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

Биёед чунон кунем, ки тасвири шиновар диви моро аз рӯи баландӣ васеъ кунад. Барои ин истифода мешавад аз усули маккорона - пас аз тасвир див гузорем бе матн бо синфи clearfix.

Тасвири мо унсури шиновар аст ва баландии волидайнро намеафзояд, аммо див-клиарфикс - шиновар нест ва ба баландии волидайн таъсир мерасонад.

Азбаски ба див-клиарфиксе хосияти 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;
}