O que é um clearfix?

1004

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?

H Bellamy
fonte
65
Não é para o IE 6. Um clearfix garante que a divseja totalmente expandida para a altura adequada para incluir seus filhos flutuantes. webtoolkit.info/css-clearfix.html
Sparky

Respostas:

983

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

Fantasma de Madara
fonte
1
de qualquer forma, por qualquer motivo, um espaço em branco é uma prática melhor do que um ponto, eu tive problemas com o ponto em alguns navegadores daí porque eu mencionei isso :) uma pequena melhora não ferirá :)
Val
1
content: "\00A0";o \ 00A0 representa um espaço em branco, um espaço em branco simples não funciona bem :) desculpe. :)
Val
14
@MadaraUchiha, por que display: bloco inline é melhor que elementos flutuantes? O único problema que tenho é que a exibição com bloco embutido causa problemas, pois existe um espaço em branco entre as tags, o que nem sempre é facilmente controlável.
mowwwalker
2
@Kzqai: É por isso que o flexbox é a opção preferida quando se torna mais amplamente suportado.
Ghost de Madara
11
Discordo que display: inline-blocké melhor do que flutua no layout baseado em bloco. Blocos embutidos são, como o próprio nome indica, colocados embutidos - a maioria dos layouts são baseados em blocos e ter esses blocos dispostos em um contexto de formatação embutido simplesmente não faz sentido. Você também precisa lidar com vários problemas associados à formatação em linha, como espaço em branco entre elementos, outros elementos em linha, dimensionamento, alinhamento e assim por diante, como muitos outros apontaram. É verdade que os layouts de flutuador também não fazem muito sentido, mas pelo menos os flutuadores têm o benefício de serem baseados em blocos.
BoltClock
70

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.

Domenic
fonte
1
Minha prática chegou a esse ponto: nunca há razão para usar float. Sempre que você o usa, metade das coisas se quebra. Eu só usaria quando precisar de coisas para conjurar dentro de uma div. O bloco embutido é incrível. O novo modelo de caixa é incrível. Portanto, não há mais hacks para alinhar verticalmente.
Muhammad Umer 14/03
50
inline-blocknão é uma melhoria estrita em relação às flutuações devido ao problema de espaçamento entre blocos , onde o espaço em branco no HTML se traduz em caracteres de espaço que separam os blocos. inline-blockrequer soluções próprias , assim como floatrequer clearfix.
Rory O'Kane
41

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;
}
John Slegers
fonte
1
Boa resposta, John! O que estou pensando é por que clear torna o divwrap os elementos flutuantes? Você pode me ajudar a visualizá-lo?
Alexander Suraphel 26/10/2015
@AlexanderSuraphel: Esta resposta explica em detalhes -> stackoverflow.com/questions/12871710/…
John Slegers
16

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>

Kir Kanos
fonte
1
Você pode descrever o que isso faz em relação à pergunta?
1,21 gigawatts
O Clearfix muda os filhos flutuantes que não influenciam o fluxo pai usando o que são hacks inteligentes, flow-rooté a solução real.
mystrdat
11

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

JRulle
fonte
5

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.

Nathan Taylor
fonte
2

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.

Dan W
fonte
1

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;
}
DevWL
fonte
0

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}
Val
fonte
Você está se substituindo aqui em pelo menos três instâncias. .clearfix {...}, html[xmlns] .clearfix {...}, * html .clearfix {...}, E .clearfix {...}toda escolha a mesma coisa e substituir uns aos outros. Isso é um pouco hacky e não é realmente necessário.
Orian
Esta é a versão antiga do método CSS clearfix, foi retirada de css-tricks.com/snippets/css/clear-fix, que então descobri que o "." [Ponto] era muito irritante e o substituiu por um espaço em branco , por isso \00A0, acho que foi por causa da compatibilidade entre navegadores e do conhecimento da época.
Val