Vlastnost float a rodič bez textu v CSS
Nyní mějme div s třídou parent
bez textu, ale se dvěma blokovými potomky
s třídou 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;
}
:
Nyní uděláme blokové potomky plovoucími vlevo a podíváme se, co se stane:
<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;
}
:
Jak vidíme, blokové potomky se seřadily do řady, avšak výška rodiče zmizela a naše bloky z něj vyčuhují dolů.
Toto chování již známe. K vyřešení problému je třeba použít clearfix. Pojďme to udělat:
<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;
}
:
