O que o float faz
float empurra um elemento para um lado do contêiner e deixa o texto que vem depois correr em volta dele:
A margin na caixa com float impede o texto de encostar nela. As margens são o jeito de controlar esse espaço; o próprio texto não pode receber uma margin em direção ao float.
Os valores
| Valor | Resultado |
|---|---|
none (padrão) | Sem float |
left | Empurrado para a borda esquerda |
right | Empurrado para a borda direita |
inline-start | Empurrado para o início da linha: esquerda em português, direita em árabe ou hebraico |
inline-end | Empurrado para o fim da linha |
inline-start e inline-end seguem a direção da escrita, então um layout feito com eles se espelha corretamente em páginas da direita para a esquerda. Um elemento com float também vira um bloco: display: inline é transformado em block, então width e height valem até em um span ou img.
Imagens com float no texto
O uso clássico: uma imagem dentro de um artigo, com o texto correndo em volta dela. Faça o float de uma para cada lado:
clear: parar de correr em volta
clear diz "comece abaixo de qualquer float anterior neste lado". Use no elemento que não deve ficar ao lado de um float, como o título da seção seguinte:
O primeiro título se espreme ao lado do float. O segundo começa abaixo dele. clear aceita left, right, both, inline-start, inline-end e none.
O pai que colapsa, e o flow-root
Os floats ficam fora do fluxo normal, então um contêiner em que todos os filhos têm float não tem nada no fluxo e colapsa para altura zero. O fundo e a borda dele viram uma linha fina acima dos floats:
display: flow-root cria um novo contexto de formatação de bloco, que sempre envolve os floats. Código mais antigo usa um "clearfix" para o mesmo resultado:
.clearfix::after {
content: "";
display: block;
clear: both;
}
overflow: hidden ou auto também contém floats, com o efeito colateral de cortar; veja overflow.
Floats não são para layout
Antes de flexbox e grid, layouts de página inteiros eram montados com colunas com float, com clearfixes e contas de largura por toda parte. Essa época acabou: floats não centralizam, não deixam colunas com a mesma altura e quebram quando o conteúdo muda de tamanho. Use display: flex ou display: grid para linhas e colunas e deixe o float para fazer o texto correr em volta de algo. Para centralizar uma imagem em vez de fazer o texto correr em volta dela, veja como centralizar uma imagem.
Correr em volta de uma forma
shape-outside deixa o texto seguir uma forma em vez do retângulo do float. Só funciona em elementos com float:
.avatar {
float: left;
width: 120px; height: 120px;
border-radius: 50%;
shape-outside: circle(50%);
margin-inline-end: 16px;
}
Erros comuns
- Um pai com altura zero. Todos os filhos dele têm float. Acrescente
display: flow-root. - Floats para colunas ou navegação. Use flexbox ou grid.
- Esperar
float: center. Ele não existe. Centralize com flexbox, grid oumargin: 0 auto. - Conteúdo depois de um float correndo em volta quando não deveria. Dê a ele
clear: both, ou coloque o float e o texto dele em um contêinerflow-root. lefterightfísicos em um site multilíngue. Useinline-starteinline-endpara o layout se espelhar em idiomas da direita para a esquerda.
Perguntas frequentes
O que o float faz no CSS?
Tira um elemento do fluxo normal e o empurra para a borda esquerda ou direita do contêiner. O texto e o conteúdo inline que vêm depois correm em volta dele.
O que o clear faz?
clear move um elemento para baixo de qualquer float anterior no lado indicado: clear: left, clear: right ou clear: both. É assim que você impede o conteúdo de correr ao lado de um float.
Por que o pai de um elemento com float fica com altura zero?
Floats ficam fora do fluxo normal, então um pai que só tem filhos com float não tem conteúdo no fluxo e colapsa. Acrescente display: flow-root ao pai e ele cresce para conter os floats.
O que é um clearfix?
Um truque para fazer um pai conter os floats, tradicionalmente um pseudo-elemento ::after com clear: both. Hoje display: flow-root no pai faz o mesmo trabalho em uma linha.
Devo usar float para layout?
Não. Os floats eram usados para colunas antes de existirem flexbox e grid. Use flexbox ou grid para o layout e deixe o float para a função original: fazer o texto correr em volta de uma imagem ou de uma citação em destaque.
