Хосияти float ва волидайн бе матн дар CSS
Бигзор ҳоло мо див бо синфи parent
бе матн, аммо бо ду блок-фарзанд
бо синфи 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;
}
:
Биёед блок-фарзандҳоро шиноваршаванда (float) аз тарафи чап созем ва бинем, ки чӣ рӯй медиҳад:
<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;
}
:
Чун ки мебинем, блок-фарзандҳо дар як қатор истоданд, вале, баландии волидайн нобуд шуд ва блокҳои мо аз он берун ба поён рафтанд.
Ин рафтор аллакай ба мо маълум аст. Барои ҳалли машкулот бояд аз клиарфикс истифода кард. Биёед ин корро анҷом диҳем:
<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;
}
:
