De eigenschap float en een ouder zonder tekst in CSS
Stel dat we nu een div hebben met de klasse parent
zonder tekst, maar met twee blok-kindelementen
met de klasse 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;
}
:
Laten we de blok-kindelementen links laten zweven en kijken wat er gebeurt:
<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;
}
:
Zoals we kunnen zien, zijn de blok-kindelementen op een rij gaan staan, maar de hoogte van de ouder is verdwenen en onze blokken steken er onderuit.
Dit gedrag is ons al bekend. Om het probleem op te lossen moeten we een clearfix gebruiken. Laten we dit doen:
<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;
}
:
