No primeiro momento que você aprende a criar um layout com CSS, o float é apresentado e logo em seguida o famoso clearfix.
Incialmente você coloca o clearfix e nem se pergunta o motivo de se utilizar ele, é algo que simplesmente funciona e você já tem muita coisa nova para se preocupar.
Mas para mim a parte mais interessante do aprendizado é quando após anos de prática, pegamos um livro sobre o assunto e todo o conteúdo passa a fazer mais sentido do que nunca.
Não é atoa que um dos meus pensamentos favoritos é este:
“Não devemos parar de explorar, e o fim de toda nossa exploração será chegar ao ponto de partida e conhecer o lugar pela primeira vez.” — Thomas Stearns Eliot
See the Pen clearfix by André | Origamid (@origamid) on CodePen.
Bom agora vamos falar sobre o clearfix. Este é um dos códigos mais atuais (Micro Clearfix de Nicolas Gallagher, com algumas modificações):
.clearfix::before, .clearfix::after {
content: ' ';
display: table;
}
.clearfix::after
clear: both;
}
Vamos aos pontos do clearfix:
1 – Onde devemos colocar o mesmo?
Este código deve ser colocado em elementos que possuem filhos com float. Geralmente você encontra ele em tags que funcionam como containers. Então um container que possui 3 blocos de texto com float, que compõe um layout de 3 colunas, deve possuir o clearfix.
2 – Qual a necessidade dele?
Meu primeiro conselho é que você abra um documento novo e teste, crie 3 div’s iguais, coloque um float nelas e adicione uma tag como container. Se você adicionar uma cor de background ao container, verá que nada vai acontecer. Se o único conteúdo dele forem as div’s, ele terá inicialmente 0px de height.
Isso acontece porque os elementos com float possuem as suas características ignoradas pelo elemento pai (container). Ele vai ignorar a altura e o conteúdo dessas div’s, por isso o seu height será de 0px, já que teoricamente não existe nada dentro do container.
É por isso que precisamos do clearfix. Ele vai injetar conteúdo após os elementos com float e “limpar” a flutuação. Com isso o elemento pai passa a ter uma altura de acordo com os elementos filhos.
Faça um teste, sem utilizar o clearfix, adicione um simples <p>Teste</p> após as div’s com float e coloque .p { clear: both; } no CSS. Você verá que irá funcionar da mesma forma que o clearfix.
3 – Como o código funciona?
Como eu disse, ele injeta um elemento com clear: both. Esse elemento é criado utilizado os pseudo-elements before e after. Criamos os elementos sem conteúdo algum, porém é necessário o content: ‘ ‘; (o espaço entre aspas é para funcionar no Opera). E devemos definir que tipo de elemento ele é, o tipo que se mostrou mais consistente entre os browsers foi o display: table;
Se você colocar display: block; verá que o margin-top em relação as div’s e o topo do container, serão ignoradas e irão ultrapassar o container. Por isso usamos o table.
O clear: both apenas no after é o que vai realmente limpar o float, o código anterior serviu apenas para a criação destes elementos “invisíveis”.
Existem pessoas que criam uma classe clearfix a parte e utilizam ela quando quiser, eu geralmente coloco o código necessário para o clearfix direto na minha classe de container, pois 99% das vezes é nela que eu quero limpar o float.
Ícone: Broom by Nikita Kozin from the Noun Project