🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

Modelo CSS: float: left;

📝 Finalidade

Este modelo é usado quando você deseja alinhar elementos lado a lado utilizando o método clássico float: left;. É útil para compatibilidade com navegadores antigos ou quando o Flexbox não pode ser usado.

📘 Explicação

Ao aplicar float: left; e definir uma largura para cada elemento, é possível criar um layout horizontal. A classe .clearfix é usada no elemento pai para manter sua altura.

✅ Demonstração

Caixa 1
Caixa 2
Caixa 3

📄 Código (trecho)

<style>
  .float-box {
    float: left;
    width: 30%;
    margin-right: 5%;
    padding: 1rem;
    background: #f9f9f9;
    border: 1px solid #ccc;
    text-align: center;
  }
  .float-box:last-child {
    margin-right: 0;
  }
  .clearfix::after {
    content: "";
    display: block;
    clear: both;
  }
</style>

<div class="clearfix">
  <div class="float-box">Caixa 1</div>
  <div class="float-box">Caixa 2</div>
  <div class="float-box">Caixa 3</div>
</div>

📦 Código (HTML completo)

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <title>Demonstração de float: left</title>
  <style>
    .float-box {
      float: left;
      width: 30%;
      margin-right: 5%;
      padding: 1rem;
      background: #f9f9f9;
      border: 1px solid #ccc;
      text-align: center;
    }
    .float-box:last-child {
      margin-right: 0;
    }
    .clearfix::after {
      content: "";
      display: block;
      clear: both;
    }
  </style>
</head>
<body>
  <div class="clearfix">
    <div class="float-box">Caixa 1</div>
    <div class="float-box">Caixa 2</div>
    <div class="float-box">Caixa 3</div>
  </div>
</body>
</html>
Copiado!

📐 Técnicas práticas para o uso de layout com float

float: left é uma propriedade clássica, mas ainda relevante no CSS. Embora o Flexbox e o Grid sejam as abordagens predominantes atualmente, o float continua essencial para criar layouts em ambientes legados.

🔄 Funcionamento básico do float

Elementos com float saem do fluxo normal do documento e se alinham à esquerda ou à direita do elemento pai. É fundamental sempre definir um valor de width e aplicar clearfix no elemento pai para garantir que sua altura seja calculada corretamente.

⚠️ Problemas comuns e soluções

Quando elementos flutuantes têm alturas diferentes, podem ocorrer quebras de layout inesperadas. Para evitar isso, pode-se aplicar overflow: hidden a cada elemento com float ou combinar com display: inline-block.

🛠️ Exemplos práticos de aplicação

É útil para situações como o texto contornando imagens ou layouts complexos no estilo de jornais e revistas. Combinando com a propriedade shape-outside, é possível criar efeitos avançados, como envolvimento de texto em formas circulares ou poligonais.

Embora o float possa ser usado em layouts responsivos, é importante ter atenção especial em dispositivos móveis, por exemplo, utilizando float: none em media queries. No desenvolvimento web moderno, recomenda-se priorizar o uso de Flexbox ou Grid, deixando o float para casos específicos.

Modelos Relacionados