Die float eienskap en ouer sonder teks in CSS
Kom ons sê ons het nou 'n div met die klas parent
sonder teks, maar met twee blok-kinders
met die 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;
}
:
Kom ons maak die blok-kinders drywend na links en kyk wat gebeur:
<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;
}
:
Soos ons kan sien, het die blok-kinders in 'n ry ingedeel, maar die hoogte van die ouer het verdwyn en ons blokke steek onder dit uit.
Hierdie gedrag is reeds aan ons bekend. Om die probleem op te los, moet 'n clearfix gebruik word. Kom ons doen dit:
<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;
}
:
