Dependendo do design que está sendo produzido, cada uma das soluções CSS clearfix abaixo tem seus próprios benefícios.
O clearfix possui aplicativos úteis, mas também foi usado como um hack. Antes de usar um clearfix, talvez essas soluções modernas de CSS possam ser úteis:
Soluções modernas de Clearfix
Recipiente com overflow: auto;
A maneira mais simples de limpar elementos flutuantes é usar o estilo overflow: autono elemento que contém. Esta solução funciona em todos os navegadores modernos.
<div style="overflow: auto;">
<img
style="float: right;"
src="path/to/floated-element.png"
width="500"
height="500"
>
<p>Your content here…</p>
</div>
Uma desvantagem, o uso de certas combinações de margem e preenchimento no elemento externo pode fazer com que as barras de rolagem apareçam, mas isso pode ser resolvido colocando a margem e o preenchimento em outro elemento contendo pai.
O uso de 'overflow: hidden' também é uma solução clearfix, mas não terá barras de rolagem; no entanto, o uso hiddenrecortará qualquer conteúdo posicionado fora do elemento que o contém.
Nota: O elemento flutuante é uma imgtag neste exemplo, mas pode ser qualquer elemento html.
Clearfix Reloaded
Thierry Koblentz no CSSMojo escreveu: O mais recente clearfix recarregado . Ele observou que, ao abandonar o suporte ao oldIE, a solução pode ser simplificada para uma instrução css. Além disso, o uso display: block(em vez de display: table) permite que as margens colapsem corretamente quando os elementos com clearfix são irmãos.
.container::after {
content: "";
display: block;
clear: both;
}
Esta é a versão mais moderna do clearfix.
⋮
⋮
Soluções Clearfix mais antigas
As soluções abaixo não são necessárias para navegadores modernos, mas podem ser úteis para direcionar navegadores mais antigos.
Observe que essas soluções dependem de erros do navegador e, portanto, devem ser usadas apenas se nenhuma das soluções acima funcionar para você.
Eles são listados aproximadamente em ordem cronológica.
"Beat That ClearFix", uma correção para navegadores modernos
Thierry Koblentz' do CSS Mojo salientou que quando o direcionamento navegadores modernos, agora podemos largar o zoome ::beforepropriedade / valores e simplesmente usar:
.container::after {
content: "";
display: table;
clear: both;
}
Esta solução não suporta o IE 6/7 ... de propósito!
Thierry também oferece: " Uma palavra de cautela : se você iniciar um novo projeto do zero, vá em frente, mas não troque essa técnica pela que você tem agora, porque mesmo que você não suporte o oldIE, suas regras existentes impedem margens em colapso ".
Micro Clearfix
A solução clearfix mais recente e adotada globalmente, a Micro Clearfix de Nicolas Gallagher .
Suporte conhecido: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+
.container::before, .container::after {
content: "";
display: table;
}
.container::after {
clear: both;
}
.container {
zoom: 1;
}
Propriedade de estouro
Esse método básico é preferido no caso usual, quando o conteúdo posicionado não será exibido fora dos limites do contêiner.
http://www.quirksmode.org/css/clearing.html
- explica como resolver problemas comuns relacionados a essa técnica, a saber, a configuração width: 100%no contêiner.
.container {
overflow: hidden;
display: inline-block;
display: block;
}
Em vez de usar a displaypropriedade para definir "hasLayout" para o IE, outras propriedades podem ser usadas para acionar "hasLayout" para um elemento .
.container {
overflow: hidden;
zoom: 1;
display: block;
}
Outra maneira de limpar carros alegóricos usando a overflowpropriedade é usar o corte de sublinhado . O IE aplicará os valores prefixados com o sublinhado, outros navegadores não. A zoompropriedade dispara hasLayout no IE:
.container {
overflow: hidden;
_overflow: visible; /* for IE */
_zoom: 1; /* for IE */
}
Enquanto isso funciona ... não é ideal usar hacks.
TORTA: Método fácil de limpeza
Esse método "Easy Clearing" mais antigo tem a vantagem de permitir que elementos posicionados fiquem fora dos limites do contêiner, às custas de CSS mais complicado.
Esta solução é bastante antiga, mas você pode aprender tudo sobre o Easy Clearing on Position Is Everything: http://www.positioniseverything.net/easyclearing.html
Elemento usando a propriedade "clear"
A solução rápida e suja (com algumas desvantagens) para quando você está rapidamente juntando algo:
<br style="clear: both" /> <!-- So dirty! -->
Desvantagens
- Não é responsivo e, portanto, pode não fornecer o efeito desejado se os estilos de layout forem alterados com base nas consultas de mídia. Uma solução em CSS puro é mais ideal.
- Ele adiciona a marcação html sem necessariamente adicionar qualquer valor semântico.
- Requer uma definição e solução em linha para cada instância, em vez de uma referência de classe a uma única solução de um "clearfix" no css e referências de classe a ele no html.
- Isso dificulta o trabalho do código para outras pessoas, pois elas podem precisar escrever mais hacks para contorná-lo.
- No futuro, quando você precisar / quiser usar outra solução clearfix, não precisará voltar e remover todas as
<br style="clear: both" />tags espalhadas pela marcação.
