Egenskapen float och förälder utan text i CSS
Antag att vi nu har en div med klassen parent
utan text, men med två block-barn
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;
}
:
Låt oss göra block-barnen flytande till vänster och se vad som händer:
<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 ser har block-barnen radat upp sig i en rad, men förälderns höjd har försvunnit och våra block sticker ut under den.
Detta beteende är redan känt för oss. För att lösa problemet bör en clearfix användas. Låt oss göra 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;
}
:
