Sifa ya float na mzazi bila maandishi katika CSS
Acha sasa tuwe na div yenye klas parent
bila maandishi, lakini na vitalu viwili-vyatoto
vyenye klas child:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>
.parent {
width: 500px;
border: 1px solid red;
text-align: justify;
}
.child {
width: 200px;
height: 100px;
border: 1px solid green;
}
:
Wacha tufanye vitalu-vyatoto vielee kushoto na tuone, kitakachotokea:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>
.parent {
width: 500px;
border: 1px solid red;
text-align: justify;
}
.child {
float: left;
width: 200px;
height: 100px;
border: 1px solid green;
}
:
Kama tunavyoona, vitalu-vyatoto vimejipanga kwa mstari, hata hivyo, urefu wa mzazi umepotea na vitalu vyetu vimetoka nje yake chini.
Tabia kama hii tayari tunajua. Ili kutatua shida inapaswa kutumia clearfix. Wacha tufanye hivyo:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="clearfix"></div>
</div>
.parent {
width: 500px;
border: 1px solid red;
text-align: justify;
}
.child {
float: left;
width: 200px;
height: 100px;
border: 1px solid green;
}
.clearfix {
clear: both;
}
:
