Kufuta-Uboreshaji na Urefu wa Mzazi katika CSS

Acha tuache div moja tu yenye klas parent, tuiondoe maandishi ndani yake, tukiache tu picha inayoelea. Kama unavyojua tayari, katika kesi hii urefu wa div utakunjwa hadi sifuri, kutabaki tu mipaka ya juu na chini. Picha itatokea nje ya div yetu kutoka chini:

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

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

Wacha tufanye iwezekanavyo ili picha inayoelea ipanue div yetu kwa urefu. Kwa hili hutumika mbinu janja - weka div baada ya picha bila maandishi yenye klas clearfix.

Picha yetu ni kipengele kinachoelea na hakipanui kitu kizazi kwa urefu, lakini div-clearfix - si kinachoelea na huathiri urefu wa kitu kizazi.

Kwa kuwa div-clearfix imepewa sifa clear, basi itatokea kwamba itajisukuma na picha kushuka chini na kusimama chini yake, huku ikipanua kitu kizazi kwa urefu.

Div-clearfix yenyewe ni tupu na haionekani kwenye skrini, lakini wakati huo huo inapanua kitu kizazi kwa urefu.

Basi, wacha tujaribu:

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