Carregando...

Float e Clear em CSS

Z-index empilhou camadas sobrepostas. float e clear resolvem outro problema clássico: deixar o texto abraçar o lado de uma imagem ou aviso e decidir quando o bloco seguinte deve cair abaixo desses floats. Aprenda o padrão de envolvimento — e deixe grades de página para Flexbox e Grid.

Um kit de ferramentas float e clear

📊 Float e clear em um olhar

Ferramenta	Trabalho do dia a dia
`float: left`	Puxa a caixa para a esquerda; o conteúdo seguinte pode envolver à direita
`float: right`	Puxa a caixa para a direita; o conteúdo seguinte pode envolver à esquerda
`float: none`	Padrão — sem comportamento float
`clear: left`	O próximo bloco recusa sentar ao lado de floats esquerdos
`clear: right`	O próximo bloco recusa sentar ao lado de floats direitos
`clear: both`	O próximo bloco cai abaixo de floats de qualquer lado
Clearfix	O pai cresce para conter filhos flutuados (ex.: `overflow` ou `display: flow-root`)

Caixas flutuadas saem do fluxo normal de um jeito especial: vizinhos podem envolver ao lado, e um pai pode colapsar para altura zero se só contiver floats. Esse colapso é por que o clearfix existe.

Flutue uma imagem, envolva a história

Puxe uma figura à esquerda e deixe parágrafos fluir ao lado. Dê largura à imagem para o wrap parecer intencional, não acidental.

Imagem float left

css

.article img.pull-left {
float: left;
width: 40%;
max-width: 220px;
margin: 0 1rem 0.75rem 0;
}

Flutue um aviso do outro lado

Uma dica ou citação curta pode sentar à direita enquanto o corpo envolve à esquerda. Mantenha margens para o texto não beijar a caixa.

Aviso float right

css

.tip {
float: right;
width: 38%;
margin: 0 0 1rem 1rem;
padding: 0.75rem 1rem;
background: #f5f7ff;
border-left: 3px solid #0b5fff;
}

Clear — pare de abraçar o float

Quando um título, rodapé ou próxima seção deve começar numa linha nova abaixo dos floats, use clear. clear: both é o «caia abaixo de tudo flutuado» do cotidiano.

Clear both após floats

css

.article-footer {
clear: both;
padding-top: 1rem;
border-top: 1px solid #eee;
}

Pais colapsados precisam de clearfix

Se um pai só envolve filhos flutuados, a altura pode colapsar e fundos/bordas parecem quebrados. Correção calma: overflow: auto (ou hidden) no pai — ou o moderno display: flow-root.

Clearfix com overflow

css

.media-row {
overflow: auto;
padding: 1rem;
border: 1px solid #e5e5e5;
}

.media-row img {
float: left;
margin-right: 1rem;
}

flow-root — um bloco contendo claro

display: flow-root cria um novo contexto de formatação de bloco para o pai conter seus floats sem emprestar efeitos colaterais de overflow.

Clearfix com flow-root

css

.card-with-float {
display: flow-root;
padding: 1rem;
background: #fff;
border: 1px solid #ddd;
}

Um hábito float calmo

Use float para texto ao redor de mídia e pequenos truques de wrap. Prefira Flexbox ou Grid para navs, colunas de página e grades de cards. Lembre: position coloca; z-index empilha; float envolve.

Padrão mídia mais texto

css

.feature {
display: flow-root;
}

.feature__media {
float: left;
width: 42%;
margin: 0 1rem 0.5rem 0;
}

.feature__copy {
/* wraps beside the media, then clears naturally as needed */
}

Experimente você

Flutue uma imagem à esquerda num artigo rico em parágrafos e ajuste margens.
Flutue uma caixa tip à direita e envolva o corpo ao lado.
Adicione clear: both a um rodapé que subia ao lado dos floats.
Conserte um pai colapsado com overflow: auto ou display: flow-root.
Escreva uma frase: quando escolheria Flex em vez de float?

Erros comuns

Montar layouts de página inteiros com float em vez de Flex/Grid
Esquecer clear e ver rodapés trepar ao lado das imagens
Ignorar pais colapsados em torno de filhos flutuados
Tratar float como position ou como z-index
Colocar clear só na caixa flutuada quando o alvo era o bloco seguinte

Resumo

float puxa uma caixa de lado para o conteúdo seguinte envolver
clear força blocos posteriores a cair abaixo dos floats
Pais só-floats podem colapsar — clearfix com overflow ou flow-root
Reserve float para padrões de wrap; use Flex/Grid para estrutura
Posicionamento e empilhamento ficam nas próprias ferramentas (position, z-index)

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓

Perguntas

🎯

70%

Para Passar

♾️

∞

Tempo

🔄

∞

Tentativas

📝 Instruções

Leia cada pergunta cuidadosamente
Selecione a melhor resposta para cada pergunta
Você pode refazer o quiz quantas vezes quiser
Seu progresso será mostrado no topo

Idioma