CSS float egenskab og forælder uden tekst
Lad os nu antage, at vi har en div med klassen parent
uden tekst, men med to blokke som børn
med klassen 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;
}
:
Lad os gøre børneblokkene flydende til venstre og se, hvad der sker:
<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;
}
:
Som vi kan se, stillede børneblokkene sig op på række, men forælderens højde forsvandt, og vores blokke stak ud under den.
Denne adfærd kender vi allerede til. For at løse problemet bør man bruge en clearfix. Lad os gøre det:
<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;
}
:
