Fork me on GitHub

Samuel Simões

CSS Clearfix

12/05/2013

Esse post vai para a galera que está começando com CSS e HTML e certamente passa/passou por esse problema.

Antes de qualquer coisa um clearfix é o termo usado para definir alguma forma de corrigir o problema que é gerado quando nós temos um container que contém outros containers que flutuam, calma, eu explico. :)

É comum passarmos pela situação onde usamos o float do CSS para flutuar blocos e não incomummente o elemento pai, que estava contendo os nossos blocos flutuantes, fica “vazio” ou “some”, abaixo um exemplo disso:

1
2
3
4
5
6
7
8
<div>
    <div style="float: left; width: 40%;">
        <p>Esquerda</p>
    </div>
    <div style="float: right; width: 40%;">
        <p>Direita</p>
    </div>
</div>

Esquerda

Direita

Usando o pseudo elemento :after do CSS podemos simular a existência de um bloco no final da DIV que contém os blocos, formando assim uma âncora e fazendo a mesma “considerar a existência” dos blocos internos.

.clearfix:after {
    content: '';
    display: block;
    clear: both;
}

Usando a classe .clearfix do CSS criado acima na DIV que engloba os elementos (linha 1 do HTML acima) tudo funciona bem!

Esquerda

Direita

Abaixo um exemplo real, de um menu de navegação de um site qualquer com o clearfix.

O código desse menu:

<div class="menu clearfix">
    <a href="#">Home</a>
    <a href="#">Pedidos</a>
    <a href="#">Contato</a>
</div>
.menu {
    background: #0d8797;
    padding: 10px;
    margin-bottom: 20px;
}

.menu a {
    border: 2px solid #137683;
    color: #000;
    float: left;
    display: block;
    padding: 4px 10px;
    background: #fff;
    margin-right: 10px;
}

Agora se tirarmos o clearfix olha como fica:

É isso, não se estresse com o float do CSS, é só uma questão de entender o seu funcionamento e usar corretamente o clearfix.

Qualquer dúvida é só deixar nos comentários. =D

Este post tem o "código aberto", caso encontre algo errado, desatualizado ou queira incorporar alguma coisa faça um pull request.

comments powered by Disqus

Samuel Simões ~ @samuelsimoes