De acordo com a especificação CSS, os flutuadores são movidos para fora do fluxo do documento e não afetam o layout das caixas de bloco, mas apenas a disposição das caixas embutidas (geralmente texto). Portanto, quando sua altura excede o contêiner que o contém, o contêiner pai geral não será esticado automaticamente para fechar o elemento flutuante. Mas às vezes precisamos desse comportamento de fechamento automático. Como lidar com isso?
Uma maneira de fazer isso é inserir um rótulo adicional no contêiner pai e deixar claro para expandir o contêiner pai. Este método tem boa compatibilidade com o navegador e não apresenta problemas. A desvantagem é que requer tags adicionais (e geralmente semânticas), então eu pessoalmente não gosto dele.
Posteriormente, houve uma nova maneira, usando a pseudoclasse :after para incorporar dinamicamente um elemento para limpar floats. Este método tem o mesmo princípio do anterior, exceto que o conteúdo extra é gerado com CSS, mas considere que o IE não o fez. support :after e tive que fazer muitos hacks. Este método tem compatibilidade geral, mas pode lidar com diferentes navegadores por meio de vários hacks. Ao mesmo tempo, pode garantir que o html seja relativamente limpo, por isso ainda é usado com mais frequência.
Mais tarde, alguém descobriu que definir o estouro do contêiner pai para um valor diferente de visível pode fechar o elemento flutuante em um navegador compatível com o padrão. Naturalmente, o IE não oferece suporte, portanto, esse método é tão válido quanto o método anterior. faz um processamento diferente (especificamente acionando o layout). A diferença é que o overflow não é tão problemático quanto a pseudoclasse :after. Ele também pode causar alguns pequenos conflitos.
Antes de usar overflow, havia outra maneira de usar float, que é fazer o contêiner pai flutuar. Isso aproveita uma característica dos elementos flutuantes - os elementos flutuantes fecharão os elementos flutuantes. Este método tem bons resultados no IE/Win e em navegadores compatíveis com o padrão, mas a desvantagem também é óbvia - o contêiner pai pode não flutuar apenas porque deseja flutuar. Afinal, flutuar é um comportamento especial e, às vezes, o layout não é. correto. Permitir que ele flutue também é normal. Embora os elementos float possam ser fechados no IE e em navegadores compatíveis com o padrão, o princípio é diferente no IE/Win, float aciona o layout e, portanto, fecha o float. O princípio do overflow neste método é o mesmo, resultando em um "intervalo de formatação em nível de bloco" - este é um fenômeno mencionado na especificação CSS. Muitas vezes tem alguma independência. Uma de suas características é que ele fechará automaticamente o float interno. elemento.
Por especificação, os seguintes tipos de elementos resultam em um escopo de formatação em nível de bloco:
● Os elementos flutuantes podem estar à esquerda ou à direita.
● Elementos absolutamente posicionados.
● Elemento Inline-block, mas este gecko não o suporta atualmente.
● elementos do tipo table-cell Na verdade, table, table-head-group, table-row, etc. também são aceitáveis, assim como inline-table (não suportado pelo gecko), porque todos eles geram indiretamente uma tabela anônima. célula.
● Overflow é um elemento cujo valor não é visível.
Portanto, acontece que em navegadores compatíveis com o padrão, também podemos ter muitos métodos para fechar um elemento flutuante, e apenas CSS é necessário, nada mais é necessário. A propósito, além do estouro, o acima tem um efeito adicional de diminuir automaticamente a largura do contêiner pai.
Para o IE/Win, ele possui seu próprio sistema, que é o layout. Os elementos com layout fecham automaticamente os elementos flutuantes. Vamos dar uma olhada nas propriedades CSS que acionam o layout. faixa acima:
● Elementos flutuantes ● Elementos absolutamente posicionados ● display:inline-block
● ampliar
● largura/altura
● overflow/overflow-x/overflow-y [Novo no IE7]
● largura/altura máxima/mínima [Novo no IE7]
Pelo exposto, existem muitas maneiras de fechar elementos flutuantes no IE e, naturalmente, todas elas têm suas limitações. Elas têm efeitos colaterais ou usam atributos não padrão (que não podem passar na verificação).
Outra coisa a mencionar é display:inline-block. Este atributo em si não tem utilidade para o IE. O efeito real é apenas adicionar layout secretamente a um elemento. No entanto, os navegadores compatíveis com os padrões reconhecem esse atributo, portanto, ele não os afeta. Para o navegador, você precisa definir a exibição de volta ao padrão. Há um bug no IE aqui se você definir display:inline-block primeiro e, em seguida, definir a exibição de volta para block (essas duas exibições devem ser colocadas em duas instruções CSS, uma após a outra, para ter efeito), então o layout terá. não desaparecerá e, ao mesmo tempo, o layout não desaparecerá. Não afetará outros navegadores, portanto, por enquanto, esta também é uma boa maneira de acionar o layout:
| .gainlayout{display:inline-block;} .gainlayout{display:bloco;} |
Portanto, há muitas maneiras de fechar elementos flutuantes nos navegadores. Como usar essas propriedades CSS em conjunto requer uma análise detalhada da situação específica. Também é necessário aplicar comentários condicionais de maneira flexível. voltar e usar claro Pode ser usado.