Pessoal, uma dúvida constante com relação ao CSS são relacionadas ao alinhamento de elementos, por isso resolvi falar um pouco sobre essa propriedade que é extremamente necessária para organização dos elementos em um layout.
Dependemos do float sempre que precisamos alinhar 2 ou mais elementos paralelamente, imagine que você queira dividir o seu layout em dois menus, um ao lado do outro, nesse caso você usaria o float com o valor left, para que os dois fiquem lado a lado, também é possível alinhar dois elementos em lados opostos, um ao left e outro ao right, lembrando que tudo que for desenvolvido será baseado no elemento pai do elemento ao qual você está implementando o float, para melhor compreensão seguem dois exemplo da utilização do float.
<div style="float:left; background-color:#060">
Primeira
</div>
<div style="float:left; background-color:#FF3">
Segunda
</div>
<div style="float:left; background-color:#009">
Terceira
</div> |
<div style="float:left; background-color:#060">
Primeira
</div>
<div style="float:left; background-color:#FF3">
Segunda
</div>
<div style="float:left; background-color:#009">
Terceira
</div>
Utilizando o Código acima teremos:
<div style="width: 300px;">
<div style="float: left; background-color: #060;"> Primeira</div>
<div style="float: right; background-color: #ff3;"> Segunda</div>
</div> |
<div style="width: 300px;">
<div style="float: left; background-color: #060;"> Primeira</div>
<div style="float: right; background-color: #ff3;"> Segunda</div>
</div>
Utilizando o Código acima teremos