Die Eigenschaft float und das übergeordnete Element ohne Text in CSS
Nehmen wir an, wir haben ein Div mit der Klasse parent
ohne Text, aber mit zwei Block-Nachfahren
mit der 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;
}
:
Lassen Sie uns die Block-Nachfahren schwebend (float) nach links setzen und schauen, was passiert:
<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;
}
:
Wie wir sehen können, haben sich die Block-Nachfahren in einer Reihe angeordnet, jedoch ist die Höhe des übergeordneten Elements verschwunden und unsere Blöcke ragen unten daraus heraus.
Dieses Verhalten ist uns bereits bekannt. Um das Problem zu lösen, sollte man einen Clearfix verwenden. Lassen Sie uns das umsetzen:
<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;
}
:
