Uma breve análise do uso de html suspenso flutuando

Autor：Eve Cole Data da Última Atualização：2025-04-25 21:16:01

Alguns usos de flutuação

Suspensão esquerda: float:left;

Suspensão direita: float:right;

Uso de flutuação

O uso de flutuação é bastante largo. Aqui, apresento brevemente os usos comuns na coleção:

Antes de entrar no Float, definirei algumas propriedades em linha em linha. Os atributos do bloco são combinados com o DIV Inclay para concluir o layout da página. Então eu entro no atributo flutuante, o que facilita muito os elementos. Não há distinção entre elementos no nível do bloco, elementos embutidos ou bloqueios embutidos no flutuante. O float também digitará automaticamente como o tamanho das alterações da largura do elemento pai, por exemplo. Ajuste diretamente a janela de visualização e aperte os elementos na próxima linha.
Além disso, no que diz respeito à otimização de SEO que acabei de aprender, a análise do navegador é de cima para baixo. Portanto, conteúdo importante é frequentemente escrito na frente e alguns sem importância ou anúncios são escritos na parte de trás. No entanto, quero que os usuários prestem atenção aos anúncios. Portanto, o conteúdo principal é organizado no centro e os anúncios são suspensos à esquerda e à direita. Acredito que amigos que frequentemente navegam nas páginas da web também notaram esse ponto. Vamos falar sobre alguns dos escritos e efeitos da suspensão. Vamos falar sobre alguns dos escritos e efeitos da suspensão.

~~Se o elemento filho for suspenso, fará com que o elemento pai colapse a uma altura. Esta parte envolve limpar a suspensão. O próximo capítulo mencionará a explicação de limpar a suspensão.~~

Então, de volta ao ponto,

O primeiro fenômeno flutuante = bloqueio em linha

A suspensão será o estilo de 4 blocos se tornando o modo de bloco embutido: como mostrado na figura abaixo

 <estilo> div {width: 200px; Altura: 200px; Background-Color: rosa; borda: 1px preto sólido; flutuar: esquerda; } </style>

 <body> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div>

O segundo fenômeno:

Conforme mostrado na figura abaixo, como a primeira é suspensa, o segundo elemento do bloco será apresentado abaixo do primeiro.

No entanto, o último elemento não atravessará o elemento anterior, como o quarto elemento do bloco, mas o terceiro não será suspenso. O elemento da quarta temporada permanece em sua posição original.

 <Toy>. Primeiro-one {float: esquerda; Background-Color: verde; } .SECOND-ONE {Background-Color: Purple; } .THIRD-ONE {Background-Color: Blue; } .Fourth-one {float: esquerda; Background-Color: cinza; } div {width: 200px; Altura: 200px; Background-Color: rosa; borda: 1px preto sólido; tamanho da fonte: 30px; } </style>

 <Body> <div class = primeiro-one> </div> <div class = segundo-one> </div> <div class = terceiro-one> </div> <div class = quarta-one> </div> <div classe = quarto-one> </div> </body>

O terceiro fenômeno:

Se todos os elementos flutuam e a largura restante do elemento pai não for suficiente para apoiar o arranjo dos elementos filhos nessa linha, ele será conectado ao nível superior

Este artigo é reproduzido em: https://segmentfault.com/a/1190000022669455

Resumir

Este é o fim deste artigo sobre uma breve análise do uso do flutuador flutuante HTML. Para obter um conteúdo flutuante html flutuante relacionado, procure artigos anteriores do Wulin.com ou continue a navegar nos artigos relacionados abaixo. Espero que todos apoiem o Wulin.com no futuro!