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.