CSS svojstvo float i roditelj bez teksta
Recimo sada da imamo div sa klasom parent
bez teksta, ali sa dva bloka-potomka
sa klasom 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;
}
:
Hajde da napravimo blokove-potomke da plivaju sa leve strane i da pogledamo šta će se desiti:
<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;
}
:
Kao što vidimo, blokovi-potomci su se postavili u red, međutim, visina roditelja je nestala i naši blokovi su izašli iz njega na dole.
Ovo ponašanje nam je već poznato. Za rešenje problema treba koristiti clearfix. Uradimo to:
<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;
}
:
