Postado dia

E ae pessoas! Você costuma montar estruturas de site com elementos que tenham a propriedade CSS "float" aplicada? Às vezes, o float pode causar posicionamento indesejado de conteúdo que vem logo o elemento que tem ele aplicado.

Para arrumar, existe uma técnica chamada “clearfix”. Trata-se da inclusão de um pseudo-elemento cancelador de float.

Pseudo-quê?

Um pseudo-elemento é usado pelo CSS para estilizar partes específicas de um elemento. Normalmente vai escrito junto ao seletor, logo depois dele, identificado por :: (usar somente um : também funciona). Por exemplo, imagine que temos uma <div> e queremos adicionar uma linha decorativa no final dela, pegando quase toda a largura do elemento. No CSS, faríamos algo assim:

#elemento-com-linha:after{content: ""; display: block; margin: 0 2px 4px; border: 1px dashed #CCC;}

Isso adicionaria uma linha tracejada de 1px de espessura no final do seu elemento, mantendo uma margem com 2px de largura nas laterais e 4px de altura abaixo. Porém, é necessário definir que o pseudo-elemento aja como um bloco, então foi definido o display: block; para isso.

E ainda assim, isso não basta, pois estamos usando um pseudo-elemento de inserção de conteúdo, no caso, um para inserir depois do conteúdo que tiver dentro do elemento (:after). Então é necessário ter um conteúdo para que o pseudo-elemento funcione. Isso é resolvido usando a propriedade "content", que permite adicionar texto. Porém, como queremos somente uma linha decorativa, deixamos o content vazio usando aspas duplas sem nada entre eles.

O clearfix

Voltando ao clearfix, essa técnica segue algo semelhante ao exemplo acima, mas não queremos inserir nada visível no site. Como isso é feito? Simples, basta adicionar o seguinte CSS no seu arquivo:

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

Como dito antes, estamos usando um pseudo-elemento de inserção de conteúdo, então é necessário que tenha o content: ""; Também precisamos que o pseudo-elemento aja como um bloco, logo adicionamos display: block; O que há de novo aqui é a propriedade clear: both; que tem a função de não permitir elementos com float aos dois lados do dele.

Assim, o conteúdo com float dentro de um elemento pai não vai influenciar o resto do conteúdo da página.

Exemplo

Preparei esse exemplo interativo simples para mostrar como funciona o clearfix:

As áreas com fundo azul mais escuro são <section>, e dentro de cada <section> tem um grupo de <div> (fundo azul claro) com float: left; aplicado nelas. Se você desmarcar o checkbox no começo do exemplo, uma classe chamada “clearfix” será removida de todos os <section>, causando uma bagunça na estrutura.

E é isso! Simples, não é?

Tags: ,

Manda sua palavra ae! Deixe um comentário: