O float é muito usado, em layouts que usam DIVs, para posicionar corretamente os elementos das páginas. Um fato a ser lembrado é que quando se flutua determinados objetos dentro de um DIV pai o navegador não irá calcular a altura do mesmo.
Elemento
Div Pai<style>E o HTML:
#pai {
border: 1px solid blue;
}
#filho {
background: yellow;
float: left;
width: 300px;
height: 100px;
}
</style>
<div id="pai">Isso é facilmente resolvido usando um div com clear setado em both antes de fechar o DIV pai para limpar a flutuação. Ficando assim:
<div id="filho">
Elemento
</div>
Div pai
</div>
<div id="pai">E como resultado os navegadores irão renderisar corretamente a altura do DIV pai:
<div id="filho">
Elemento
</div>
Div pai
<div style="clear: both;”/>
</div>
Elemento
Div Pai
Faça um comentário! Seja o primeiro a comentar.