it-swarm-pt.tech

O que é um clearfix?

Recentemente, eu estava pesquisando o código de alguns sites e vi que cada <div> tinha uma classe clearfix.

Depois de uma rápida pesquisa no Google, eu aprendi que é para o IE6, às vezes, mas o que na verdade é um clearfix?

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

932
H Bellamy

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

Vale a pena notar que hoje, o uso de elementos flutuantes para o layout está ficando cada vez mais desencorajado com o uso de alternativas melhores.

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

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

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

(Talvez uma vez que a sua posição seja estabelecida completamente, pode ser a maneira absolutamente recomendada de expor os elementos.)


Clearfix Image

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

O clearfix é uma forma de combater o problema do contêinerzero-heightpara elementos flutuantes

Um clearfix é executado da seguinte forma:

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

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

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

Normalmente você precisaria fazer algo da seguinte maneira:

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

Com clearfix, você só precisa do seguinte:

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

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

905
Madara Uchiha

Se você aprender visualizando, esta imagem pode ajudá-lo a entender o que clearfix faz.

enter image description here

445
kyo

As outras respostas estão corretas. Mas quero acrescentar que é uma relíquia da época em que as pessoas estavam aprendendo CSS, e abusaram de float para fazer todo o seu layout. float destina-se a fazer coisas como imagens flutuantes ao lado de longas execuções de texto, mas muitas pessoas o usaram como mecanismo primário de layout. Desde que não foi realmente destinado a isso, você precisa de hacks como "clearfix" para fazê-lo funcionar.

Hoje em dia, display: inline-block é uma alternativa sólida ( exceto para IE6 e IE7 ), embora navegadores mais modernos estejam vindo com mecanismos de layout ainda mais úteis em nomes como flexbox, layout de grade, etc.

63
Domenic

O clearfix permite que um contêiner contenha seus filhos flutuantes. Sem um clearfix ou estilo equivalente, um contêiner não envolve seus filhos flutuantes e colapsos, como se seus filhos flutuantes estivessem posicionados de forma absoluta.

Existem várias versões do clearfix, comNicolas GallaghereThierry Koblentzcomo principais autores.

Se você quiser suporte para navegadores mais antigos, é melhor usar esse 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 em oferecer suporte a navegadores mais antigos, há uma versão mais curta:

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

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 de exibição definida como raiz de fluxo) gera uma caixa de contêiner de bloco e organiza seu conteúdo usando o layout de fluxo. Ele sempre estabelece um novo contexto de formatação de bloco para seu conteúdo.

Isso significa que, se você usar um div pai contendo um ou vários filhos flutuantes, essa propriedade garantirá que o pai inclua todos os seus filhos. Sem qualquer necessidade de um clearfix hack. Em qualquer criança, nem mesmo um último elemento dummy (se você estiver 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>
13
Kir Kanos

Simplificando, clearfix é um hack .

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

Eu pessoalmente inclino-me 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

11
JRulle

Uma técnica comumente usada em layouts baseados em float de CSS é atribuir um punhado de propriedades CSS a um elemento que você sabe que conterá elementos flutuantes. A técnica, que é comumente 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 um contêiner :after o elemento ativo contendo um único '.' marcado como oculto, o que limpará todas as flutuações preexistentes e redefinirá efetivamente a página da próxima parte do conteúdo.

5
Nathan Taylor

A outra (e talvez a mais simples) opção para obter um clearfix é usar overflow:hidden; no elemento de contenção. 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>

Claro que isso só pode ser usado em instâncias onde você nunca deseja que o conteúdo transbordar.

2
Dan W

Eu tentei a resposta aceita, mas eu ainda tive um problema com o alinhamento de conteúdo. Adicionando 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 irá compilar para CSS abaixo:

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

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

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

Mais sobre isto 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 ...

.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}
0
Val