Propriedade Float
Última atualização: 2026-09-13
float Propriedade Float
A propriedade float retira um elemento do fluxo normal e o faz flutuar para a esquerda ou para a direita até que sua borda toque o bloco de contenção ou outro elemento flutuante. Originalmente criada para quebrar texto ao redor de imagens, foi bastante usada depois em layouts de múltiplas colunas; agora que Flexbox e Grid estão difundidos, voltou ao seu propósito original.
| Categoria | |
|---|---|
| Valor Inicial | none |
| Herdado | Não |
| Aplica-se A | todos |
| Tipo de Animação | discrete |
| Versão CSS | CSS1 |
| Status | Padrão |
📝 Sintaxe
float: none | left | right | inline-start | inline-end;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
left | right | none | Palavra-chave | A direção na qual o elemento flutua. |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| float | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Aviso： Um elemento flutuante sai do fluxo do documento, então o pai pode perder a noção da altura e colapsar. Formas comuns de limpar floats: overflow:hidden no pai ou um pseudo-elemento ::after.
Dica： Para layouts de múltiplas colunas, prefira Flexbox ou Grid; o float é mais adequado para cenários nativos como quebrar texto ao redor de imagens.
❓ Perguntas Frequentes
QComo eu limpo floats?
ATrês abordagens comuns: primeiro, overflow:hidden ou auto no pai, envolvendo os filhos flutuantes em um BFC; segundo, o método do pseudo-elemento, que é recomendado: .clearfix::after{content:'';display:block;clear:both}; terceiro, display:flow-root no pai. Todas as três fazem o pai conter novamente seus filhos flutuantes e recuperar a altura colapsada. Em código novo, flow-root é o mais elegante, enquanto a classe clearfix ainda aparece na maioria das bases de código existentes.
QQual é a diferença entre float e display:inline-block?
AO float retira o elemento do fluxo e o empurra para a esquerda ou direita, permitindo que o conteúdo seguinte envolva ao seu redor, e o pai pode colapsar em altura. O inline-block mantém o elemento no fluxo, o dispõe horizontalmente sem efeito de quebra e deixa espaços em branco padrão entre os itens, que podem ser removidos com font-size:0. Em resumo, o float serve para quebra de texto e layouts de coluna antigos, enquanto o inline-block serve para listas horizontais e barras de navegação.
QPor que o float colapsa a altura do pai?
AUm elemento flutuante sai do fluxo normal, então o pai não percebe sua altura e assume que não há nada dentro, colapsando para zero ou apenas para a altura do conteúdo não flutuante. A solução é fazer o pai conter o float novamente: overflow:hidden ou auto cria um BFC, um pseudo-elemento clearfix o limpa, ou display:flow-root faz o mesmo. Containers flex e grid não colapsam dess jeito de forma alguma.
QO float ainda é necessário em layouts modernos?
APara layout, basicamente não: Flexbox e Grid substituíram totalmente o float em arranjos de múltiplas colunas e horizontais, com mais controle e sem o ônus de limpar floats. O float agora atende ao seu propósito original de quebrar texto ao redor de imagens, como a tipografia de jornais. Se em um projeto novo você só precisa de itens lado a lado, prefira flex e reserve o float para os raros casos em que o texto deve fluir ao redor de uma forma.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
clear (Limpeza de Float)
Saiba como impedir que elementos sejam afetados por floats.
Layout Flexbox
A alternativa moderna de layout para o float.
