Muitas pessoas estudaram o problema de fechamento de elementos flutuantes, mas as soluções são diferentes e nem todo método é perfeito. Fechar elementos flutuantes (ou limpar flutuadores) é um problema frequentemente encontrado no design padrão da web. Portanto, gostaria de resumir aqui vários métodos comumente usados ​​e comparar sua facilidade de uso e ambientes aplicáveis. Se você tiver uma maneira melhor, traga-a para discussão.

O caso mais simples é incluir um elemento div pequeno e de largura fixa (como navegação, referência, etc.) em um div grande junto com o conteúdo de outro elemento. Por exemplo, o seguinte código:

Podemos definir um valor de largura (por exemplo, 20%) para "#inner", mas como div é um elemento de nível de bloco, mesmo se definirmos a largura, o conteúdo atrás dele só poderá ser exibido na próxima linha, a menos que dê a ele uma propriedade float (flutue para a esquerda ou flutue para a direita). Então o problema que mencionamos acima surgirá neste momento.

Isso não será um problema se "#inner" tiver largura e altura menores que "#outer".

No entanto, se a altura de "#inner" exceder a altura de "#outer", então a parte inferior excederá a parte inferior de "#outer". Isso ocorre porque depois de definirmos o atributo float para "#inner", ele se separará do fluxo de texto e, não importa como sua largura e altura mudem, "#outer" não seguirá a mudança.

Solução:

1) Método de tags adicionais

O primeiro método e o método recomendado pelo W3C é usar tags adicionais. Este método consiste em adicionar uma tag vazia no final do conteúdo. Uma abordagem típica é usar algo como:

Ou use

Este método força a expansão do contêiner externo adicionando um elemento HTML. No entanto, este método adicionará tags adicionais e fará com que a estrutura HTML pareça menos concisa.

Nota: descobri que no Internet Explorer (seja 6 ou 7)
pode limpar elementos flutuantes, mas não pode fechar elementos flutuantes. Este problema não existe no Firefox, não sei por que. ? !

2) Use a pseudoclasse after

para adicionar novo conteúdo no final do conteúdo atual especificado usando a pseudoclasse after e a declaração de conteúdo. Uma abordagem comum é adicionar um “ponto” porque é menor e menos perceptível. Em seguida, usamos isso para limpar o float (fechar o elemento flutuante) e ocultar o conteúdo:
#externo:depois{
contente:".";
altura:0;
visibilidade:oculto;
exibição: bloco;
claro: ambos;

O estranho é que o Internet Explorer 6 e versões anteriores no Windows não suportam a pseudoclasse after no CSS 2.1, mas o Internet Explorer no Mac pode ser usado normalmente, então temos que lidar com o Win/IE separadamente. Entre os muitos métodos para distinguir entre o Internet Explorer no Win e no Mac, o método mais comumente usado é o truque Holly, código CSS:
/* Este código só pode ser visto pelo IE/Win*/
Regras CSS
/*End Hack */

Existem duas linhas de comentários no código acima, e uma barra invertida () aparece no final da primeira linha. O Internet Explorer no Mac pensará que o comentário não terminou, então continua até o final. primeira linha. Um "*/" completo aparece e todos os caracteres do meio são considerados comentários, mas o IE/Win considerará apenas a primeira e a terceira linhas como comentários, e os do meio são códigos válidos. Então isso distingue o IE em diferentes plataformas.

Com base nos princípios acima, para limpar carros alegóricos no IE 6 no Windows, você pode usar o seguinte código:

#externo {
display: bloco embutido;
}
/* Holly Hack Begine*/
*html #externo{
altura:1%;
}
#externo {
exibição: bloco;
}
/* Terminar hack */

PS Se você não considera os usuários do IE6/Mac, você só precisa escrever * html #outer {height:1%;}.
Além disso, parece que display:inline-block não funciona bem no Internet Explorer 7. Então use os truques de Hack mais completos.

3) Flutuar elementos externos O

método float-in-float é muito simples, que consiste em flutuar o elemento "#outer" (para a esquerda ou para a direita).

Porém, outro problema causado por este método é que o próximo elemento adjacente a "#outer" será afetado por "#outer" e sua posição mudará, portanto você deve ter cuidado ao usar este método. Existe uma opção para flutuar todos os elementos da página e, finalmente, usar um elemento significativo apropriado (como um rodapé) para limpar os flutuadores. Isso ajuda a reduzir a marcação desnecessária, mas muitos flutuadores aumentarão a dificuldade do layout.

4) Defina overflow como oculto ou automático

de

overflow do atributo "#outer" como oculto ou automático para também limpar carros alegóricos.

Mas tome cuidado ao usar overflow porque isso afeta o desempenho do navegador. Além disso, simplesmente definir overflow como oculto ou automático no Internet Explorer 6 não pode efetivamente limpar o float (fechar o elemento flutuante. Você também deve especificar uma dimensão de "#outer", ou seja, especificar uma largura ou altura para ele). :
#externo {
estouro:automático;
largura:100%;
}

Nota: Se quiser usar este método para limpar floats (fechar elementos flutuantes) no IE5/Mac, você deve definir o atributo overflow como oculto.

Compare e escolha

qual dos quatro métodos é o melhor? Em primeiro lugar, não é recomendado usar a pseudoclasse after. Comparado com os outros três métodos, o truque do azevinho é um pouco complicado e difícil de dominar. O truque do azevinho que mencionei acima não é apenas um problema no IE/. Win. Quando:hover aparecer, também haverá outros problemas, então adicionamos atributos como inline-block, o que significa que há mais incerteza neste método. Recomendado para pessoas que são "limpas" em relação ao código e possuem altas habilidades técnicas.

Então os outros três métodos podem realmente ser considerados. No entanto, ao usar overflow, isso pode ter um impacto no desempenho da página, e esse impacto é incerto. É melhor testar sua página em vários navegadores

e usar tags adicionais para limpar floats (fechar o elemento float), é uma prática recomendada; pelo W3C. Quanto a usar elementos
ou