EasyCode365EasyCode365

Elementos flutuantes e clearfix

Floats são um recurso mais antigo do CSS, mas ainda vale a pena aprendê-los.

Hoje, normalmente você deve usar Flexbox ou Grid para layouts completos de página. Floats ainda são úteis para uma tarefa clássica: colocar uma imagem ou uma pequena caixa ao lado do texto para que o texto a envolva.

Nesta aula, você aprenderá como floats funcionam, por que eles podem quebrar contêineres pais e como clear e clearfixes resolvem problemas comuns com floats.

Por que floats existem

Floats foram criados para layouts com estilo de revista.

A ideia original era simples: colocar uma imagem no lado esquerdo ou direito de um artigo e deixar o texto do parágrafo envolvê-la.

Antes de Flexbox e Grid existirem, desenvolvedores também usavam floats para criar colunas e layouts de página. Funcionava, mas muitas vezes causava problemas de layout.

O que float faz

A propriedade float move um elemento para o lado esquerdo ou direito do seu contêiner.

O conteúdo que vem depois do elemento flutuante pode subir e envolvê-lo.

Valores comuns são:

  • float: left
  • float: right
  • float: none

Elementos flutuantes são removidos do fluxo normal de blocos, mas texto e conteúdo inline ainda os envolvem. Esse é o comportamento especial que torna floats úteis.

Flutuar para a esquerda e para a direita

Use float: left para empurrar um elemento para a esquerda.

Use float: right para empurrar um elemento para a direita.

Somente leitura

Quando um elemento flutua à esquerda, o texto próximo pode envolvê-lo pelo lado direito. Quando um elemento flutua à direita, o texto próximo pode envolvê-lo pelo lado esquerdo.

Como o texto envolve elementos flutuantes

Este é o caso de uso mais amigável para iniciantes.

A caixa de imagem flutua à esquerda, e o texto do parágrafo a envolve.

Editável
<article class="article">
  <div class="article-image">Imagem</div>
  <p>
    Este texto vem depois da imagem flutuante. Como a imagem flutua à esquerda, o parágrafo sobe e
    envolve seu lado direito. Este é o caso de uso clássico de CSS floats. Adicione mais texto, e
    você verá o texto continuar ao lado da imagem até não haver mais espaço vertical ao lado dela.
    Depois que o texto passa pela parte inferior da imagem flutuante, ele volta para a linha normal
    de largura completa abaixo.
  </p>
</article>

<style>
  .article {
    max-width: 420px;
    font-family: Arial, sans-serif;
    line-height: 1.5;
  }

  .article-image {
    float: left;
    width: 110px;
    height: 90px;
    margin-right: 16px;
    margin-bottom: 8px;
    display: grid;
    place-items: center;
    background-color: #dbeafe;
    border: 2px solid #2563eb;
    border-radius: 6px;
    color: #1e40af;
    font-weight: bold;
  }
</style>

O margin-right cria espaço entre a caixa flutuante e o texto.

Colapso de altura do pai

Floats podem criar um problema confuso.

Se um pai contém apenas filhos flutuantes, talvez o pai não cresça o suficiente para envolvê-los. Isso se chama colapso de altura do pai.

Editável
<div class="broken-parent">
  <div class="float-box">Float</div>
</div>

<p class="after-text">Este texto sobe porque o pai não envolveu o float.</p>

<style>
  .broken-parent {
    border: 3px solid #dc2626;
    background-color: #fee2e2;
    font-family: Arial, sans-serif;
  }

  .float-box {
    float: left;
    width: 120px;
    padding: 20px;
    background-color: #fecaca;
    border: 2px solid #991b1b;
    text-align: center;
  }

  .after-text {
    font-family: Arial, sans-serif;
  }
</style>

A borda vermelha do pai não envolve o filho flutuante. Isso acontece porque o filho flutuante não é mais contado como um bloco normal na altura do pai.

O que clear faz

A propriedade clear diz a um elemento para não ficar ao lado de um elemento flutuante.

Em vez disso, o elemento com clear se move para baixo do float.

Editável
<div class="side-note">Float</div>

<p class="wrap-text">Este parágrafo envolve a caixa flutuante.</p>

<p class="cleared-text">Este parágrafo tem clear, então começa abaixo da caixa flutuante.</p>

<style>
  .side-note {
    float: left;
    width: 110px;
    padding: 18px;
    margin-right: 12px;
    background-color: #fef3c7;
    border: 2px solid #d97706;
    font-family: Arial, sans-serif;
    text-align: center;
  }

  .wrap-text,
  .cleared-text {
    font-family: Arial, sans-serif;
  }

  .cleared-text {
    clear: both;
    padding-top: 8px;
  }
</style>

Use clear quando o próximo elemento deve começar abaixo do conteúdo flutuante.

Limpando esquerda, direita e ambos

A propriedade clear tem três valores comuns:

  • clear: left move para baixo de elementos flutuados à esquerda.
  • clear: right move para baixo de elementos flutuados à direita.
  • clear: both move para baixo de floats à esquerda e à direita.

Para iniciantes, clear: both costuma ser a escolha mais segura.

Fazendo o pai conter seus floats

Quando um pai contém apenas filhos flutuantes, você precisa de uma forma de fazê-lo envolvê-los e corrigir o problema de colapso de altura.

Existem duas soluções comuns, e ambas são aplicadas ao pai, não ao filho flutuante:

  • display: flow-root: a abordagem moderna de uma linha.
  • Um clearfix: uma técnica mais antiga usando o pseudo-elemento ::after.

As próximas duas seções mostram cada uma.

Técnica moderna: display: flow-root

A forma moderna mais limpa de fazer um pai envolver seus filhos flutuantes é uma linha: display: flow-root no pai.

Ela cria um novo block formatting context, que contém os floats. Não há pseudo-elemento nem regras extras para lembrar.

Editável
<div class="fixed-parent">
  <div class="float-box">Float</div>
</div>

<p class="after-text">Agora o pai envolve o float, então este texto começa abaixo dele.</p>

<style>
  .fixed-parent {
    display: flow-root;
    border: 3px solid #16a34a;
    background-color: #dcfce7;
    font-family: Arial, sans-serif;
  }

  .float-box {
    float: left;
    width: 120px;
    padding: 20px;
    background-color: #bbf7d0;
    border: 2px solid #15803d;
    text-align: center;
  }

  .after-text {
    font-family: Arial, sans-serif;
  }
</style>

display: flow-root é suportado em todos os navegadores modernos, então é a escolha recomendada para projetos novos.

O clearfix clássico

Você ainda verá uma técnica mais antiga em muitos codebases existentes. Um clearfix usa o pseudo-elemento ::after para criar um elemento invisível depois dos filhos flutuantes e limpar os floats.

Editável
<div class="fixed-parent clearfix">
  <div class="float-box">Float</div>
</div>

<p class="after-text">O clearfix também faz o pai envolver o float.</p>

<style>
  .fixed-parent {
    border: 3px solid #16a34a;
    background-color: #dcfce7;
    font-family: Arial, sans-serif;
  }

  .float-box {
    float: left;
    width: 120px;
    padding: 20px;
    background-color: #bbf7d0;
    border: 2px solid #15803d;
    text-align: center;
  }

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

  .after-text {
    font-family: Arial, sans-serif;
  }
</style>

É útil reconhecer esse padrão, mas para código novo display: flow-root é mais simples.

Quando floats ainda são úteis hoje

Floats ainda são úteis quando você quer que o texto envolva algo.

Bons exemplos:

  • uma imagem dentro de um artigo
  • uma pequena foto de autor ao lado de um texto de biografia
  • uma citação destacada dentro de um parágrafo longo

Para esse tipo de envolvimento de texto, floats ainda fazem sentido.

Quando não usar floats

Não use floats para construir um layout moderno de página inteira.

Evite floats para:

  • colunas de página
  • headers e sidebars
  • grids de cards
  • layouts de aplicativos

Use Flexbox ou Grid para esses layouts. Eles são mais fáceis de controlar e funcionam melhor em telas responsivas.

Erros comuns de iniciantes

  • Usar floats para layouts modernos de página: use Flexbox ou Grid para layouts estruturais.
  • Esquecer de limpar a próxima seção: texto ou footers podem envolver um float quando você queria que ficassem abaixo dele.
  • Colocar clearfix no filho flutuante: clearfix pertence ao contêiner pai.
  • Esquecer o colapso de altura do pai: um pai com apenas filhos flutuantes pode parecer vazio.
  • Flutuar sem espaçamento: adicione margins para que o texto não toque o elemento flutuante.

Mini tarefa prática

Veja esta regra CSS:

Somente leitura

O que essa regra faz com o footer?

Confira as respostas do quiz quando estiver pronto.

Quiz curto com respostas

  1. Qual é o caso de uso clássico para floats?
  2. Qual propriedade CSS força um elemento a se mover para baixo do conteúdo flutuante?
  3. Onde uma classe clearfix deve ser aplicada: no filho flutuante ou no pai?

Respostas:

  1. Fazer o texto envolver uma imagem ou um elemento pequeno.
  2. clear.
  3. No pai.

Resposta da mini tarefa prática: ela força o footer a se mover para baixo de floats à esquerda e à direita, em vez de ficar ao lado deles.

Pequeno desafio

Estilize o layout de artigo abaixo.

Seus objetivos:

  • Faça .profile-pic flutuar para a direita.
  • Adicione um margin esquerdo para que o texto não toque a caixa flutuante.
  • Use clear em .next-section para que ela comece abaixo do float.
Editável
<article class="bio">
  <div class="profile-pic">Foto</div>
  <p>Esta biografia curta deve envolver a foto. A foto deve ficar no lado direito do texto.</p>
</article>

<section class="next-section">
  <h3>Próxima seção</h3>
  <p>Esta seção deve começar abaixo da foto flutuante.</p>
</section>

<style>
  .bio,
  .next-section {
    max-width: 420px;
    font-family: Arial, sans-serif;
    line-height: 1.5;
  }

  .profile-pic {
    width: 100px;
    height: 90px;
    display: grid;
    place-items: center;
    background-color: #dbeafe;
    border: 2px solid #2563eb;
    border-radius: 6px;
    color: #1e40af;
    font-weight: bold;
    /* Faça esta caixa flutuar para a direita */

    /* Adicione margin esquerdo */
  }

  .next-section {
    /* Mova esta seção para baixo do float */

    margin-top: 16px;
    padding: 12px;
    background-color: #f3f4f6;
    border: 1px solid #d1d5db;
  }
</style>

Resumo

  • float: left e float: right movem elementos para os lados.
  • Texto e conteúdo inline podem envolver elementos flutuantes.
  • Floats eram usados historicamente para layout, mas hoje são melhores para envolver texto.
  • Elementos flutuantes podem causar colapso de altura do pai.
  • clear impede que um elemento fique ao lado de conteúdo flutuante.
  • clear: both move um elemento para baixo de floats à esquerda e à direita.
  • display: flow-root no pai é a forma moderna de fazê-lo envolver seus filhos flutuantes.
  • Um clearfix usando ::after é a técnica mais antiga para o mesmo trabalho.
  • Use Flexbox ou Grid para layouts modernos de página em vez de floats.