---
title: Descreva os 'float' e como funcionam.
---

Float é uma propriedade CSS de posicionamento. Elementos flutuantes permanecem uma parte do fluxo da página, e afetarão o posicionamento de outros elementos (por exemplo, texto irá fluir em torno dos elementos flutuantes), ao contrário de `position: absolute`, que são removidos do fluxo da página.

A propriedade CSS `clear` pode ser usada para ser posicionada abaixo de `left`/`right`/`both` elementos flutuantes.

Se um elemento pai não conter nada além de elementos flutuantes, sua altura será desmoronada a nada. Ele pode ser corrigido limpando o float após os elementos flutuantes no contêiner, mas antes do fechamento do container.

## O hack do Clearfix

O hack `.clearfix` usa um CSS inteligente [pseudo-element](/questions/quiz/describe-pseudo-elements-and-discuss-what-they-are-used-for) (`::after`) para limpar floats. Ao invés de definir o excesso de fluxo no pai, você aplica uma classe adicional `clearfix` para ele. Em seguida, aplique este CSS:

```css
.clearfix::after {
  content: ' ';
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}
```

Como alternativa, dê a propriedade `overflow: auto` ou `overflow: hidden` ao elemento pai que estabelecerá um novo contexto de formatação de bloco dentro dos filhos e ele será expandido para conter seus filhos.

## Trívia

Nos bons dias antigos, o CSS frameworks como o Bootstrap 2 usou a propriedade `float` para implementar seu sistema de grade. No entanto, com CSS Flexbox e Grid atualmente, não há muita necessidade de usar a propriedade `float`.

## Referências

- [Clearfix: Uma Lição em Desenvolvimento Web Evolução](https://css-tricks.com/clearfix-a-lesson-web-development-evolution/)