Floats em CSS são uma técnica originalmente projetada para permitir que o texto envolva um elemento, como uma imagem. Com o tempo, no entanto, os desenvolvedores encontraram novas formas de usar floats, aplicando-os ao design de layout de maneiras criativas. Embora métodos modernos de layout como Flexbox e Grid sejam agora mais comumente usados, entender floats ainda é importante, especialmente ao trabalhar com código mais antigo ou ao precisar alcançar efeitos específicos de layout. Quando um elemento é flutuado, ele é retirado do fluxo normal do documento e empurrado para a esquerda ou para a direita do seu contêiner. O conteúdo que segue irá envolver o elemento flutuante, preenchendo o espaço restante. Um uso clássico é envolver texto ao redor de imagens, onde uma imagem é flutuada para um lado e o texto envolve ela. Esta técnica ainda é amplamente utilizada, especialmente em artigos e blogs onde imagens precisam ser colocadas ao lado do texto. Aqui está o exemplo de código:

<link rel="stylesheet" href="styles.css">
<div class="container">
  <img src="https://placehold.co/150x150" alt="Placeholder Image">
</div>

.container {
  border: 1px solid black;
  padding: 10px;
}

img {
  float: left;
  margin-right: 20px;
}

No exemplo acima, o container não envolve a imagem flutuante. A imagem está fora do fluxo normal do documento e o contêiner colapsou para altura zero porque ele não "vê" os elementos filhos flutuantes. Floats também eram populares para criar layouts de múltiplas colunas antes do Flexbox e do Grid se tornarem amplamente usados. Ao posicionar elementos flutuantes lado a lado, os desenvolvedores podiam criar colunas que se alinhavam horizontalmente. No entanto, ao usar floats, é importante lidar com o problema do colapso dos elementos pai quando seus elementos filhos estão com float. The clearfix technique solution is applied to the class container element to fix this issue.

<link rel="stylesheet" href="styles.css">
<div class="container">
  <img src="https://placehold.co/150x150" alt="Placeholder Image">
  <p> This is an example of text flowing around a floated image.</p>
</div>

.container {
  border: 1px solid black;
}

/* Clearfix CSS */
.container::after {
  content: "";  
  display: block;
  clear: both;
}

img {
  float: left;
  margin-right: 20px;
}

• ::after é um pseudo-elemento que adiciona um bloco invisível após o conteúdo do container.
• content: "" garante que o pseudo-elemento esteja presente mas não exibe nenhum conteúdo.
• display: block torna o pseudo-elemento um elemento de nível de bloco.
• clear: both garante que o pseudo-elemento limpe ambos os lados de quaisquer elementos flutuantes acima dele.

No exemplo acima, adicionamos um novo elemento de parágrafo para tornar o colapso mais perceptível. Como o parágrafo permanece no fluxo normal do documento, o contêiner se expande o suficiente para envolvê-lo. Então, aplicamos a técnica clearfix para corrigir o colapso e fazer com que a borda do contêiner seja exibida corretamente. Você pode tentar remover a regra clearfix para ver o colapso do contêiner novamente. A técnica clearfix garante que o elemento pai envolva corretamente seus filhos flutuantes. Clearfix força o contêiner pai a "ver" os elementos filhos flutuantes adicionando uma propriedade clear após o conteúdo flutuante. Embora floats não sejam mais o método preferido para layouts complexos devido a técnicas mais modernas como Flexbox e Grid, eles ainda desempenham um papel essencial em certos cenários. Quer você esteja envolvendo texto ao redor de imagens ou trabalhando em projetos legados, entender como os floats funcionam e como limpá-los corretamente é fundamental para manter layouts bem estruturados e responsivos.