O que é um clearfix?

Recentemente, eu estava olhando o código de algum site e vi que todos <div> tinham uma classe clearfix.

Após uma rápida pesquisa no Google, soube que às vezes é para o IE6, mas o que é realmente uma correção?

Você poderia fornecer alguns exemplos de um layout com um clearfix, comparado a um layout sem um clearfix?

Se você não precisa oferecer suporte ao IE9 ou inferior, pode usar o flexbox livremente e não precisa usar layouts flutuantes.

Vale ressaltar que hoje, o uso de elementos flutuantes no layout está ficando cada vez mais desencorajado com o uso de melhores alternativas.

• display: inline-block - Melhor
• Flexbox - melhor (mas suporte limitado ao navegador)

O Flexbox é suportado no Firefox 18, Chrome 21, Opera 12.10 e Internet Explorer 10, Safari 6.1 (incluindo o Mobile Safari) e no navegador padrão do Android 4.4.

Para uma lista detalhada de navegadores, consulte: https://caniuse.com/flexbox .

(Talvez uma vez que sua posição esteja completamente estabelecida, talvez seja a maneira absolutamente recomendada de apresentar elementos.)

Um clearfix é uma maneira de um elemento limpar automaticamente seus elementos filhos , para que você não precise adicionar marcações adicionais. Geralmente é usado em layouts de flutuador, onde os elementos são flutuados para serem empilhados horizontalmente.

O clearfix é uma maneira de combater o problema do contêiner de altura zero para elementos flutuantes

Um clearfix é executado da seguinte maneira:

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

Ou, se você não precisar de suporte do IE <8, o seguinte também é bom:

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

Normalmente você precisaria fazer o seguinte:

<div>
    <div style="float: left;">Sidebar</div>
    <div style="clear: both;"></div> <!-- Clear the float -->
</div>

Com o clearfix, você só precisa do seguinte:

<div class="clearfix">
    <div style="float: left;" class="clearfix">Sidebar</div>
    <!-- No Clearing div! -->
</div>

Leia sobre isso neste artigo - por Chris Coyer @ CSS-Tricks

As outras respostas estão corretas. Mas quero acrescentar que é uma relíquia da época em que as pessoas aprendiam CSS pela primeira vez e abusavam floatde todo o layout. floatdestina-se a fazer coisas como imagens flutuantes ao lado de longas execuções de texto, mas muitas pessoas o usaram como mecanismo de layout principal. Como não foi realmente feito para isso, você precisa de hacks como "clearfix" para fazê-lo funcionar.

Nos dias de hoje display: inline-block é uma alternativa sólida ( exceto IE6 e IE7 ), embora navegadores mais modernos venham com mecanismos de layout ainda mais úteis sob nomes como flexbox, layout de grade etc.

O clearfixpermite que um contêiner envolva seus filhos flutuantes. Sem umclearfix estilo equivalente ou equivalente, um contêiner não envolve seus filhos flutuantes e cai, como se seus filhos flutuassem estivessem posicionados absolutamente.

Existem várias versões do clearfix, com Nicolas Gallagher e Thierry Koblentz como autores principais.

Se você deseja suporte para navegadores mais antigos, é melhor usar este clearfix:

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

No SCSS, você pode usar a seguinte técnica:

%clearfix {
    &:before, &:after {
        content:" ";
        display:table;
    }

    &:after {
        clear:both;
    }

    & {
        *zoom:1;
    }
}

#clearfixedelement {
    @extend %clearfix;
}

Se você não se importa com o suporte a navegadores antigos, há uma versão mais curta:

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

Para oferecer uma atualização sobre a situação no segundo trimestre de 2017.

Uma nova propriedade de exibição CSS3 está disponível no Firefox 53, Chrome 58 e Opera 45.

.clearfix {
   display: flow-root;
}

Verifique a disponibilidade de qualquer navegador aqui: http://caniuse.com/#feat=flow-root

O elemento (com uma propriedade display configurada como flow-root) gera uma caixa de contêiner de bloco e expõe seu conteúdo usando o layout de fluxo. Ele sempre estabelece um novo contexto de formatação de bloco para seu conteúdo.

Significando que se você usar uma div pai contendo um ou vários filhos flutuantes, essa propriedade garantirá que o pai encerre todos os filhos. Sem a necessidade de um hack do clearfix. Em nenhum filho, nem mesmo no último elemento fictício (se você estivesse usando a variante clearfix com: before nos últimos filhos).

.container {
  display: flow-root;
  background-color: Gainsboro;
}

.item {
  border: 1px solid Black;
  float: left;
}

.item1 {  
  height: 120px;
  width: 120px;
}

.item2 {  
  height: 80px;
  width: 140px;
  float: right;
}

.item3 {  
  height: 160px;
  width: 110px;
}

<div class="container">
  This container box encloses all of its floating children.
  <div class="item item1">Floating box 1</div>
  <div class="item item2">Floating box 2</div> 
  <div class="item item3">Floating box 3</div>  
</div>

Simplificando, o clearfix é um hack .

É uma daquelas coisas feias com as quais todos temos que conviver, pois é realmente a única maneira razoável de garantir que os elementos filhos flutuantes não transbordem de seus pais. Existem outros esquemas de layout por aí, mas a flutuação é muito comum hoje em dia no design / desenvolvimento da web para ignorar o valor do hack do clearfix.

Pessoalmente, me inclino para a solução Micro Clearfix (Nicolas Gallagher)

.container:before,
.container:after {
  content:"";
  display:table;
}
.container:after {
  clear:both;
}
.container {
  zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

referência

Uma técnica comumente usada em layouts baseados em float CSS está atribuindo um punhado de propriedades CSS a um elemento que você sabe que conterá elementos flutuantes. A técnica, geralmente implementada usando uma definição de classe chamada clearfix, (geralmente) implementa os seguintes comportamentos CSS:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    zoom: 1
}

O objetivo desses comportamentos combinados é criar em um contêiner :aftero elemento ativo que contém um único '.' marcado como oculto, que limpará todos os carros alegóricos existentes e redefinirá efetivamente a página para o próximo conteúdo.

A outra opção (e talvez a mais simples) para obter um clearfix é usar overflow:hidden;o elemento que o contém. Por exemplo

.parent {
  background: red;
  overflow: hidden;
}
.segment-a {
  float: left;
}
.segment-b {
  float: right;
}

<div class="parent">
  <div class="segment-a">
    Float left
  </div>
  <div class="segment-b">
    Float right
  </div>
</div>

Obviamente, isso só pode ser usado em casos em que você nunca deseja que o conteúdo seja excedido.

Tentei a resposta aceita, mas ainda tinha um problema com o alinhamento do conteúdo. A adição de um seletor ": before", como mostrado abaixo, corrigiu o problema:

// LESS HELPER
.clearfix()
{
    &:after, &:before{
       content: " "; /* Older browser do not support empty content */
       visibility: hidden;
       display: block;
       height: 0;
       clear: both;
    }
}

MENOS acima serão compilados para CSS abaixo:

clearfix:after,
clearfix:before {
  content: " ";
  /* Older browser do not support empty content */
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

Aqui está um método diferente, mesma coisa, mas um pouco diferente

a diferença é o ponto de conteúdo que é substituído por um \00A0==whitespace

Mais sobre isso http://www.jqui.net/tips-tricks/css-clearfix/

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix{ display: inline-block;}
html[xmlns] .clearfix { display: block;}
* html .clearfix{ height: 1%;}
.clearfix {display: block}

Aqui está uma versão compacta dele ...

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;width:0;font-size: 0px}.clearfix{ display: inline-block;}html[xmlns] .clearfix { display: block;}* html .clearfix{ height: 1%;}.clearfix {display: block}