Propriedade float e elemento pai sem texto em CSS
Suponha que agora temos uma div com a classe parent
sem texto, mas com dois blocos filhos
com a classe 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;
}
:
Vamos fazer os blocos filhos flutuarem para a esquerda e ver o que acontece:
<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;
}
:
Como podemos ver, os blocos filhos se alinharam em uma linha, no entanto, a altura do elemento pai desapareceu e nossos blocos ultrapassaram seu limite para baixo.
Este comportamento já nos é conhecido. Para resolver o problema, devemos usar um clearfix. Vamos fazer isso:
<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;
}
:
