Todo mundo que mexe com programação web já passou por isso:
.children {
float: left;
}
<div class="parent">
<div class="children">
Teste
</div>
</div>
Se vocês usarem o Inspect Element acima podem notar que no elemento .parent
o height
é 0px
.
Nunca li por qual motivo isso acontece. Isso faz parte da pergunta, se alguém souber e puder explicar, seria bom.
Mas o que eu faço para resolver isso ? Algo que eu aprendi há um tempo, para não ter que usar o clear: both
:
.parent {
display: table;
}
.children {
float: left;
}
<div class="parent">
<div class="children">
Teste
</div>
</div>
Podem notar agora que o elemento .parent
tem a mesma altura que o .children
, mesmo com float
. Embora já faça isso há um tempo e me ajuda muito, gostaria de saber porque isso acontece.
Qual o efeito de
table
emfloat
?E quando não se faz isso porque o elemento pai fica com
height: 0px
?