Limpar novas palavras flutuantes

origem :

.clearfix:depois {
visibilidade: oculta;
exibição: bloco;
tamanho da fonte: 0;
contente: " ";
claro: ambos;
altura: 0;
}
.clearfix { display: tabela embutida }
/* Oculta do IE-mac */
* html .clearfix { altura: 1% };
.clearfix { display: bloco }
/* Fim da ocultação do IE-mac */

ilustrar :

• *Aplica o primeiro bloco de declaração à maioria dos navegadores compatíveis com os padrões, com o objetivo de criar um bloco invisível de conteúdo vazio que limpa os flutuadores do elemento de destino.
• *O segundo item aplica o atributo de exibição de tabela inline para clearfix, apenas para IE/Mac.
• *Explorar* / Ocultar algumas regras do IE/Mac:
• * height:1% é usado para acionar haslayout no IE6.
• *Reaplique o atributo de exibição de bloco ao IE diferente do IE/Mac.
• *A última linha é usada para encerrar o hack para IE/Mac.

Como os navegadores visados ​​por este método tornaram-se história (especialmente o IE5 no Mac), ou estão a caminho de se tornarem padrões, este método não está mais tão atualizado.

Depois de abandonar o suporte para IE/Mac, novo método de limpeza de flutuações:

/* novo clearfix */
.clearfix:depois {
visibilidade: oculta;
exibição: bloco;
tamanho da fonte: 0;
contente: " ";
claro: ambos;
altura: 0;
}
* html .clearfix { zoom: 1 } /* IE6 */
*:first-child+html .clearfix { zoom: 1 } /* IE7 */

ilustrar :

Nem o IE6 nem o IE7 suportam a pseudoclasse :after, então as próximas duas são necessárias para acionar o haslayout do IE6/7 para limpar os floats. Felizmente o IE8 suporta a pseudoclasse :after. Portanto, apenas hacks para o IE6/7 são necessários.