A flutuação clara é algo que todos que criam páginas encontrarão, mas será que todos podem saber disso claramente e entendê-lo de forma abrangente? Então escrevi um artigo como este assim que tive tempo livre. Não posso cobrir tudo, mas posso basicamente ensinar a todos o que sei.
Vamos dar uma olhada em quantos métodos existem para limpar floats (não escreverei sobre o uso de zoom:1 no IE, mas escreverei sobre isso no próximo tópico). DEMO correspondente
- Use a pseudoclasse:after para limpar a camada de pseudoclasse com altura zero para controle vazio subsequente.
- Use CSS overflow:auto para suportar altura
- Usando CSS overflow:hidden para produzir adaptações estranhas
- Use display:table para transformar o objeto em formato de tabela
- Use a tag div e o atributo clear do css
- Use a tag br e o atributo clear do css
- Use a tag br e seu próprio atributo HTML clear
À primeira vista, ambos podem resolver o problema, mas têm seus próprios prós e contras. (correspondência um a um)
- A semântica da estrutura de vantagem está completamente correta e nenhum outro problema estranho surgirá.
Desvantagens Métodos de reutilização inadequados podem facilmente levar a um aumento acentuado no volume de código.
Recomenda- se utilizá-lo quando a camada mais externa estiver levemente flutuante ou para pessoas que entendem o método de reaproveitamento modular. - Vantagens : A semântica da estrutura está totalmente correta e a quantidade de código é muito pequena.
Desvantagens : Após vários aninhamentos, clicar na caixa flutuante de luz mais externa fará com que todo o conteúdo da camada mais externa para a camada mais interna seja selecionado (FF); barra (IE).
Recomenda- se usar o módulo dentro de um, não aninhe-o. - Vantagens : A semântica da estrutura está totalmente correta e a quantidade de código é muito pequena.
Desvantagens: Quando o conteúdo aumenta, é fácil quebrar automaticamente as linhas e o conteúdo fica oculto.
Recomenda- se usar quando a largura é fixa e não aninha. - Vantagens : A semântica da estrutura está totalmente correta e a quantidade de código é muito pequena.
As propriedades do modelo da caixa de deficiências mudaram. É concebível que haja mais eventos estranhos do que você pode contar.
É recomendado que se você não quiser consertar o bug e matá-lo, é melhor não usá-lo, entretanto, ele pode ser usado como um engano temporário na versão alfa para teste; - Vantagens: A quantidade de código é muito pequena e a capacidade de reutilização é extremamente alta.
A desvantagem é que não consegue se adaptar perfeitamente à semântica e não é propício a revisões e demanda mudanças.
Recomendado para iniciantes, permite resolver rapidamente problemas flutuantes. - Vantagens: O grau de semântica é melhor que o do quinto caso, a quantidade de código é muito pequena e a reutilização é extremamente alta;
Desvantagens: A semântica ainda não é perfeita, o que não favorece revisões e exige mudanças.
Recomendado para iniciantes, permite resolver rapidamente problemas flutuantes. - Vantagens: O grau de semântica é melhor que o dos casos 5 e 6, a quantidade de código é mínima e a reutilização é extremamente alta;
Desvantagens: A semântica ainda não é perfeita, o que não favorece revisões e exige mudanças.
Recomenda-se orientar os iniciantes a utilizá-lo na atualização de seu pensamento, para que entendam que ao invés de usar classname para controlar um desempenho, é melhor retornar à era WEB1.0 das páginas web e usar diretamente atributos html para controlar o desempenho Afinal, este último tem menos código.
Finalmente, a lista está completa. Porém, acho necessário pedir desculpas a todos pelo artigo que reimprimi no Ghost. Lamento muito ter mudado o título do Ghost de "mais fácil" para "ideal", o que mais tarde enganou muitos alunos; Então reescrevi um artigo para compartilhar com você.
Texto original: http://webteam.tencent.com/?p=1122
