Propriedade CSS float
A propriedade CSS float define se uma caixa ou elemento deve flutuar ou não. Veja exemplos e pratique você mesmo.
A propriedade CSS float retira um elemento do fluxo normal do documento e o empurra para a esquerda ou direita de seu contêiner, permitindo que o texto e o conteúdo inline seguintes sejam envolvidos ao redor dele. Ela foi criada originalmente para fluir texto ao redor de imagens (como num layout de revista), e esse continua sendo o seu uso mais claro até hoje.
Esta página aborda o que float faz, seus valores, como ele interage com a propriedade clear, o problema do "pai colapsado" e a correção com clearfix, e quando usar Flexbox em vez disso.
Quando um elemento é flutuado:
- Ele é removido do fluxo normal, portanto elementos block-level após ele sobem para ocupar o espaço.
- O conteúdo inline (texto, imagens inline) é envolvido ao longo do lado do elemento flutuante.
- O float encolhe para caber no seu conteúdo, a menos que você defina uma
widthexplícita.
A propriedade clear é a companheira natural de float: ela diz a um elemento para cair abaixo de qualquer float precedente, em vez de ficar ao lado deles.
A propriedade float é ignorada em elementos com posicionamento absoluto (position: absolute ou position: fixed), porque esses já foram removidos do fluxo normal.
| Valor Inicial | none |
|---|---|
| Aplicável a | Todos os elementos. |
| Herdado | Não. |
| Animável | Não. |
| Versão | CSS1 |
| Sintaxe DOM | object.style.cssFloat = "right"; |
Sintaxe
Sintaxe da propriedade CSS float
float: none | left | right | initial | inherit;Exemplo da propriedade float:
Exemplo da propriedade CSS float com o valor right
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
float: right;
background: #ccc;
}
</style>
</head>
<body>
<h2>Float property example</h2>
<img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3dcos" />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>Resultado
No exemplo a seguir, a imagem flutua para a esquerda, então o texto do parágrafo é envolvido ao longo de sua borda direita.
Exemplo de uso da propriedade float para flutuar uma imagem:
Exemplo da propriedade CSS float com o valor left
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
float: left;
background: #ccc;
}
</style>
</head>
<body>
<h2>Float property example</h2>
<img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3dcos" />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>Valores
| Valor | Descrição | Experimente |
|---|---|---|
| none | Significa que o elemento não é flutuado e será exibido onde aparece no texto. Este é o valor padrão desta propriedade. | Experimente » |
| left | Significa que o elemento flutua para a esquerda. | Experimente » |
| right | Significa que o elemento flutua para a direita. | Experimente » |
| initial | Faz com que a propriedade use seu valor padrão. | Experimente » |
| inherit | Herda a propriedade de seu elemento pai. |
O problema do pai colapsado
Um elemento flutuado é retirado do fluxo normal, portanto seu pai não o conta mais ao calcular a própria altura. Se um contêiner contém apenas filhos flutuantes, ele colapsa para zero de altura — fundos e bordas desaparecem, e o conteúdo seguinte pode deslizar para baixo dos floats.
<!DOCTYPE html>
<html>
<head>
<style>
.box { border: 2px solid #1a7e3c; }
.box img { float: left; }
</style>
</head>
<body>
<!-- The border collapses around the floated image -->
<div class="box">
<img src="logo.png" alt="logo" width="80" height="80" />
</div>
</body>
</html>A correção clearfix
A maneira clássica e sem dependências de fazer um pai conter seus floats é o clearfix: adicionar um pseudo-elemento gerado que limpa os floats. Aplique a classe clearfix ao elemento pai.
.clearfix::after {
content: "";
display: block;
clear: both;
}Você também pode forçar o confinamento com overflow: auto (ou hidden) no pai, ou display: flow-root, que existe especificamente para criar um novo contexto de formatação de bloco sem efeitos colaterais. Veja overflow para comparar as alternativas.
Quando usar float (e quando não usar)
Use float quando você realmente quiser que o conteúdo envolva um elemento — tipicamente uma imagem ou uma citação dentro de um texto corrido. É para isso que ele foi projetado.
Evite float para layout de página (barras laterais, colunas, linhas de navegação). Ele foi mal utilizado para isso por anos, mas é frágil e precisa de hacks com clearfix. Para layout moderno, prefira Flexbox para linhas/colunas unidimensionais ou CSS Grid para layouts bidimensionais. Veja também display e position.