Tempo de leitura: 7 minutos
Por trás do float css, existe um mar infinito de possibilidades.
O float é provavelmente um dos conceitos de CSS mais difícil de entender. Seu comportamento pode ser intrigante, inesperado e mágico. Provavelmente porque, de todas as propriedades de posicionamento existentes, é a que mais influencia os elementos em sua volta.
Em outras palavras, aplicar um float não apenas modifica o elemento em que é aplicado, mas também altera seus ancestrais, irmãos, descendentes e elementos subsequentes.
float só pode ter um desses 3 valores:
lefterighttransforma um elemento em flutuantenoneremove o aspecto flutuante
O que iremos aprender neste artigo?
O que é Float CSS
Segundo o MDN, a propriedade float do CSS determina que um elemento deve ser retirado do seu fluxo normal e colocado ao longo do lado direito ou esquerdo do seu container, onde textos e elementos em linha irão se posicionar ao seu redor.
Ou seja, a propriedade float CSS pode fazer elementos HTML flutuarem para a esquerda ou para a direita dentro de seu elemento pai.
O conteúdo dentro do mesmo elemento pai se moverá para cima e envolverá o elemento flutuante. Neste tutorial de float CSS, explicarei como está propriedade funciona com mais detalhes.
Leia também >> Pré-processadores CSS – O Guia Definitivo
Exemplo de Float CSS
<div style="border:1px solid #cccccc;"> Este é o primeiro texto <div style="border: 2px solid red;">Este é o box 1</div> <div style="border: 2px solid green;">Este é o box 2</div> Este é o último texto </div>
O código HTML contém um elemento div que possui um texto, dois elementos div com outro texto dentro de seu corpo. Quando renderizados, é assim que aparece:
See the Pen
Exemplo 1
Nas seções a seguir, vou mostrar como tornar os dois elementos div aninhados flutuando para a esquerda e para a direita dentro de seu elemento pai usando a propriedade float CSS .
float: left
Agora, vamos tentar deixar o primeiro elemento div aninhado flutuando à esquerda usando a propriedade float CSS. Fazemos isso definindo a propriedade float CSS do elemento HTML com o valor left. Aqui está um exemplo mostrando um elemento div com a propriedade float CSS definida como left:
<div style="border:1px solid #cccccc;"> Este é o primeiro texto <div style="float: left; border: 2px solid red;">Este é o box 1</div> <div style="border: 2px solid green;">Este é o box 2</div> Este é o último texto </div>
Aqui está como aparece com o elemento flutuando a esquerda quando renderizado no navegador:
See the Pen
Exemplo 2
Observe como o primeiro elemento div (com a borda vermelha) agora flutua para a esquerda dentro de seu elemento pai. O primeiro texto agora está bem em torno do primeiro elemento div, à direita dele.
O segundo elemento div ainda está posicionado abaixo do primeiro elemento div e o último texto está abaixo dele.
Agora, vamos tentar deixar o segundo div float aninhado também. Aqui está o código:
<div style="border:1px solid #cccccc;"> Este é o primeiro texto <div style="float: left; border: 2px solid red;">Este é o box 1</div> <div style="float: left; border: 2px solid green;">Este é o box 2</div> Este é o último texto </div>
E aqui está o código quando processado no navegador:
See the Pen
Exemplo 3
Agora, o primeiro e o segundo elemento aninhado na div estão flutuando a esquerda dentro de seu elemento pai. O texto envolve muito bem os dois elementos flutuantes.
Baixe Gratuitamente o Guia Completo de Como se Tornar um Desenvolvedor Full StackTenha em mãos o livro digital, que irá lhe ensinar tudo sobre as principais tecnologias web e fará você dar o ponta-pé inicial no Universo Full-Stack!
Float: right
Agora vamos tentar fazer o segundo float div aninhado para a direita. Fazemos isso configurando a propriedade float CSS com right vez de left. Aqui está o código:
<div style="border:1px solid #cccccc;"> Este é o primeiro texto <div style="float: left; border: 2px solid red;">Este é o box 1</div> <div style="float: right; border: 2px solid green;">Este é o box 2</div> Este é o último texto </div>
Aqui está o que aparece quando processado no navegador:
See the Pen
Exemplo 4
Veja como os dois elementos estão agora flutuando em cada direção dentro de seu elemento pai. Eles estão até localizados na mesma posição vertical (em direção ao topo do elemento pai). O texto agora envolve os dois elementos div sendo renderizados entre os elementos div.
Clear
Agora, vamos adicionar um terceiro elemento div que também irá flutuar à esquerda:
<div style="border:1px solid #cccccc;"> Este é o primeiro texto <div style="float: left; border: 2px solid red;">Este é o box 1</div> <div style="float: right; border: 2px solid green;">Este é o box 2</div> <div style="float: left; border: 2px solid red;">Este é o box 3</div> Este é o último texto </div>
Quando renderizados em um navegador é assim que nosso código aparece agora:
See the Pen
Exemplo 5
Observe como os dois elementos que fluam a esquerda estão posicionados na mesma “linha” horizontal, um após o outro.
Imagine agora que você deseja que os dois elementos div com as bordas vermelhas flutuem à esquerda, mas um sob o outro, em vez de ficarem próximos um do outro. Para fazer isso, você precisa definir a propriedade clear no CSS.
A propriedade clear CSS pode ser utilizada com um destes valores:
leftrightbothnone
O valor left significa que o elemento deve ficar livre de todos os elementos flutuantes à esquerda. O valor right significa que o elemento deve ficar livre de todos os elementos flutuantes a direita. O valor both significa que o elemento deve ficar livre dos elementos flutuantes da esquerda e direita. O valor none significa sem limpeza, que é o mesmo que deixar de fora a propriedade clear do CSS.
Vamos definir a propriedade clear do último elemento div para left. Então o último elemento div ainda deve flutuar para a esquerda, mas fique afastado do primeiro elemento div flutuante esquerdo. Aqui está como o código:
<div style="border:1px solid #cccccc;"> Este é o primeiro texto <div style="float: left; border: 2px solid red;">Este é o box 1</div> <div style="float: right; border: 2px solid green;">Este é o box 2</div> <div style="float: left; clear: left; border: 2px solid red;">Este é o box 3</div> Este é o último texto </div>
Aqui está como o código aparece quando processado em um navegador:
See the Pen
exemplo 6 clear
Observe como o último elemento div ainda flutua à esquerda, mas permanece abaixo do primeiro elemento div flutuante esquerdo .
Conclusão de Float CSS
Gostou do nosso artigo sobre float CSS? Mas calma ai, tenho algo ainda melhor pra você!
Deseja aprender com projetos práticos a criar aplicações completas utilizando os mais modernos frameworks do mercado?
>> Conheça o nosso treinamento completo “Pacote Full-Stack” e Domine as Tecnologias mais Atuais e Poderosas!
Com o Pacote Full-Stack, você não vai dominar apenas o CSS3 mas as maiores e principais tecnologias do mercado e se tornar um(a) Desenvolvedor(a) Full-Stack Completo, com salários que ultrapassam facilmente a faixa dos R$5.000,00. Ou ainda, poderá criar sua própria Agência/Empresa e ganhar quanto quiser. Você será dono(a) do próprio tempo!
