origem :
.clearfix: depois {
Visibilidade: escondida;
exibição: bloco;
tamanho de fonte: 0;
contente: " ";
claro: ambos;
altura: 0;
}
.clearfix {display: inline-table;
/* Se esconde de IE-Mac */
* html .clearfix {altura: 1%;
.clearfix {display: block;
/ * Encontre a esconder-se de IE-Mac */
ilustrar :
* Aplique o primeiro bloco de declaração aos navegadores compatíveis com o padrão, com o objetivo de criar um bloco nulo invisível para limpar flutuando para o elemento de destino.
*O segundo item aplica o atributo de exibição em linha em linha para Clearfix, apenas para IE/Mac.
* Use* / ocultar algumas regras do IE / Mac:
* Altura: 1% é usado para acionar o HasLayout no IE6.
*Reaplicar as propriedades de exibição do bloco para IE fora do IE/Mac.
*A última linha é usada para encerrar o hack para IE/Mac.
Como esse método é direcionado para os navegadores que se tornaram história (especialmente IE5 no Mac) ou estão a caminho dos padrões, esse método não é mais tão progressivo quanto os tempos.
Depois de jogar fora o suporte para o IE/Mac, um novo método de limpeza flutuante:
/ * new clearfix */
.clearfix: depois {
Visibilidade: escondida;
exibição: bloco;
tamanho de fonte: 0;
contente: " ";
claro: ambos;
altura: 0;
}
* html .clearfix {zoom: 1;
*: primeiro filho+html .clearfix {zoom: 1;
ilustrar :
O IE6 e o IE7 não apóiam o: Após a pseudo-classe, então os dois próximos são necessários para acionar o HasLayout do IE6/7 para limpar o flutuador. Felizmente, o IE8 suporta: após pseudo-classes. Portanto, apenas o hack para o IE6/7 é necessário.