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 (::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:

.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