Compartilhamento de tecnologia

Explicação detalhada da função flutuante do HTML

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

"Float" em HTML é uma tecnologia de layout CSS que foi originalmente projetada para que o texto envolva imagens ou para obter efeitos de layout simples, como organizar elementos lado a lado. No entanto, à medida que o desenvolvimento web evoluiu, os floats também foram amplamente utilizados em designs de layout de página mais complexos, apesar do CSS moderno fornecer métodos de layout mais avançados (como Flexbox e Grid).

A função básica de flutuar

  1. quebra automática de texto : Esta é a aplicação de carros alegóricos mais original e intuitiva. Quando uma imagem (ou outro elemento em nível de bloco) é definida como flutuante, o texto ao redor flui ao redor dela em vez de continuar com o fluxo normal do documento (de cima para baixo, da esquerda para a direita).

  2. layout lado a lado : ao definir flutuadores em vários elementos, você pode organizá-los lado a lado em vez de empilhá-los por padrão. Isso é útil ao criar barras de navegação, galerias de imagens ou qualquer layout que exija que os elementos sejam organizados horizontalmente.

Como usar flutuador

  • Propriedades CSS:passarfloat Propriedades para elementos flutuantes.Esta propriedade pode aceitar vários valores, incluindoleft、right、none(padrão, significando sem flutuação) einherit(Herdado do elemento paifloatvalor).

  • exemplo：

    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.   <style>  
    5.     .float-left {  
    6.       float: left;  
    7.       width: 50%;  
    8.     }  
    9.     .float-right {  
    10.       float: right;  
    11.       width: 50%;  
    12.     }  
    13.   </style>  
    14. </head>  
    15. <body>  
    16.  
    17. <div class="float-left">左边的内容</div>  
    18. <div class="float-right">右边的内容</div>  
    19.  
    20. </body>  
    21. </html>

  • Neste exemplo, dois<div>Os elementos são definidos viafloat: left;efloat: right;Layout lado a lado implementado.

  • efeito flutuante

  • Saia do fluxo de documentos: os elementos flutuantes são retirados do fluxo normal do documento, o que significa que não ocupam mais o espaço que ocupavam originalmente e outros elementos não flutuantes ignoram sua presença e preenchem as lacunas que deixam.

  • Efeito nos elementos subsequentes: os elementos não flutuantes após um elemento flutuante tentarão preencher o espaço deixado pelo elemento flutuante, mas o próprio elemento flutuante não cobrirá o conteúdo ou as bordas do elemento subsequente.

  • flutuação clara: Para evitar o impacto imprevisível da flutuação no layout subsequente, geralmente é necessário usar o método de compensação da flutuação, como usarclear: both;atributos, limpeza de pseudoelementos ou criação de um novo contexto de formatação em nível de bloco (como usaroverflow: auto;oudisplay: flex;）。

Resumir

Embora os floats sejam uma das técnicas de layout importantes no desenvolvimento web, eles também trazem algumas complexidades e limitações. Com o surgimento de tecnologias modernas de layout CSS, como Flexbox e Grid, a aplicação de floats em layouts complexos diminuiu gradualmente, mas em alguns cenários ou projetos simples que exigem compatibilidade com versões anteriores de navegadores antigos, os floats ainda são uma ferramenta útil.

Continuaremos a atualizar e compartilhar conteúdo relevante no futuro.Lembre-se de prestar atenção!

Perfil pessoal

Ele se dedica à pesquisa de tecnologia há mais de 30 anos e é proficiente em diversas linguagens como java, linux, javascript, php, css, etc. estação de documentação do desenvolvedor para compartilhar alguns problemas no desenvolvimento de tecnologia para referência futura.

minhas informações de contato

Correspondência