Float - Aula de CSS

O que é o Float?

A propriedade float permite que um elemento “flutue” à esquerda ou à direita dentro de seu contêiner, fazendo com que o conteúdo seguinte se ajuste ao seu lado.

Os valores principais são:

• float: left — move o elemento para a esquerda;
• float: right — move o elemento para a direita;
• float: none — comportamento padrão (sem flutuar).

Exemplo Prático

Usando o Clear

Após usar float, é comum que o elemento pai “colapse” em altura. Para corrigir isso, usamos a propriedade clear ou a técnica clearfix.

Exemplo de clearfix aplicado ao container:

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
      

Float em Imagens

O float é muito usado para alinhar imagens com o texto, especialmente quando queremos que o conteúdo flua ao lado dela. Neste exemplo, a imagem está com float: left; e o texto se ajusta automaticamente.

Atividade Prática

Crie uma página simples contendo:

• Duas caixas flutuantes (float: left e float: right);
• Uma imagem alinhada à direita com float: right;
• Um parágrafo de texto fluindo entre os elementos.

Depois, adicione um elemento com clear: both para garantir que o layout fique correto.