A propriedade float no css é crucial pra quem pretende seguir na criação de html e desenvolvimento web. É praticamente impossível criar um layout “tableless” (sem tabelas), sem entender como funciona a propriedade float. E realmente, em alguns pontos ela pode chegar a confundir um pouco quem esta iniciando no desenvolvimento web.

Float significa “flutuar”, ou seja, faz com que o elemento “flutue” no html. A principal tag utilizada na montagem e estruturação de layouts é a div. A tag div tem por padrão, comportamento de bloco, ou seja, ela ja vem setada com display:block por padrão. Sendo assim, ela se comporta como um bloco. Se você colocar 10 divs em um html, mesme que só contenha uma letra em cada uma, cada uma irá ficar abaixo da outra, elas ocupam a largura inteira do container onde estão. Mas como eu colocaria divs lado a lado? Para isso existe a propriedade float, faz com que um elemento no html flutue ao lado de outro. A propriedade float pode ter 4 valores: left, right, none e inherit. Os valores left e right são esquerda e direita respectivamente, none é o padrão que significa sem float, e  inherit significa que o elemento terá o mesmo float de seu elemento pai.

como funciona a propriedade floatAgora vem uma observação importante, duas divs, uma com float left e a outra sem float. Repare que a div sem float, “preenche” todo o espaço que sobra da div com float que não preencheu o elemento pai. Ou seja, a div sem float irá se “ajustar” no espaço que sobrou.

Outra possível configuração é esta:

duas divs com float left

Neste caso temos duas divs com float left, e a div com float none continua se ajustando ao espaço que sobrou. Repare que desta forma, podemos criar várias divs flutuando e fazer vários “quadrados lado a lado”, tantos quantos você quiser, contato que a largura deles não excedam a largura do container pai.

Outro possível cenário, são divs com float left e right dentro do mesmo container:

divs com float left e right respectivamente

Isto é interessante quando precisamos que duas divs flutuem, mas fique uma em cada ponta.

O float gera algumas confusões no meio do desenvolvimento. Uma delas, é que divs com float, são como se fossem invisíveis aos seus containers pais. Ou seja uma div pai, que dentro dela só tenha outras divs com float, farão com que o elemento pai fique sem altura. ja que divs com float não preenchem a altura de seu elemento pai. paara resolver este problema temos a propriedade clear, que serve para limpar o float de elementos prévios com float. Seus possíveis valores são: left, right, both, none e inherit. O mais utilizado é o clear:both. eu particularmente utilizo uma técnica pra fazer isto, que se resume a sempre colocar um elemento com clear:both dentro de containers que contém divs flutuantes:

.clr{display:block; height:0px; clear:both;}

E no html:

<div>
	<div style="float:left"></div>
	<div style="float:right"></div>
	<span class="clr"></span>
</div>

Mas existem inúmeras técnicas para resolver esse problema na net.

Como estruturar um layout utilizando float?

Conhecendo bem a propriedade float, podemos começar a imaginar como começar a fazer um layout. Basta imaginar o layout em vários quadrados que serão estruturados com divs flutuando ou não, se possível faça um rascunho no papel mesmo, para depois passar para o código, algo como:

Exemplo de como estruturar um layout antes do html

 

Vocês podem conferir um pouco mais sobre float na página do W3C sobre o mesmo: http://www.w3schools.com/css/css_float.asp 

Este conteúdo foi útil para você? Então ajude este blog a continuar no ar com novos conteúdos!
Basta clicar em algum anúncio da header ou sidebar e aguardar pelo menos 10 segundos