Un breve análisis del uso del flotador suspendido HTML

Autor：Eve Cole Fecha de actualización：2025-04-25 21:16:01

Algunos usos de flotación

Suspensión izquierda: float:left;

Suspensión derecha: float:right;

Uso de flotador

El uso de flotador es bastante amplio. Aquí presento brevemente los usos comunes en la colección:

Antes de entrar en flotación, estableceré algunas propiedades de bloque en línea. Los atributos de bloque se combinan con la incrustación DIV para completar el diseño de la página. Luego me metí en el atributo flotante, lo que hace que los elementos floten mucho más fáciles. No hay distinción entre elementos de nivel de bloque, elementos en línea o bloques en línea en la flotación. El flotador también escribirá automáticamente a medida que cambia el tamaño del ancho del elemento principal, por ejemplo. Ajuste directamente la ventana de observación y exprima los elementos en la siguiente línea.
Además, en cuanto a la optimización de SEO sobre la que acabo de aprender, el análisis del navegador es de arriba a abajo. Por lo tanto, el contenido importante a menudo se escribe en la parte delantera y algunos anuncios sin importancia o no se escriben en la parte posterior. Sin embargo, quiero que los usuarios presten atención a los anuncios. Por lo tanto, el contenido principal se organiza en el centro, y los anuncios se suspenden a izquierda y derecha. Creo que los amigos que a menudo navegan por las páginas web también han notado este punto. Hablemos sobre parte de la escritura y los efectos de la suspensión. Hablemos sobre parte de la escritura y los efectos de la suspensión.

Si el elemento infantil está suspendido, hará que el elemento principal colapse a una altura. Esta parte implica despejar la suspensión. El próximo capítulo mencionará la explicación de limpiar la suspensión.

Así que volviendo al grano,

El primer fenómeno flotación = bloque en línea

La suspensión será el estilo de 4 bloques que se convierten en modo de bloque en línea: como se muestra en la figura a continuación

 <style> div {ancho: 200px; Altura: 200px; Color de fondo: rosa; borde: 1px negro sólido; flotante: izquierda; } </style>

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

El segundo fenómeno:

Como se muestra en la figura a continuación, dado que el primero está suspendido, el segundo elemento de bloque se presentará debajo del primero.

Sin embargo, el último elemento no se cruzará al elemento anterior, como el cuarto elemento de bloque, pero el tercero no será suspendido. El elemento de bloque de cuarta temporada permanece en su posición original.

 <syle> .first-one {float: izquierda; Color de fondo: verde; } .second-one {de fondo de fondo: púrpura; } .third-one {background-color: azul; } .fourth-one {float: izquierda; Color de fondo: gris; } div {ancho: 200px; Altura: 200px; Color de fondo: rosa; borde: 1px negro sólido; tamaño de fuente: 30px; } </style>

 <body> <div class = first-one> </div> <div class = segundo-one> </div> <div class = tercero-one> </div> <div class = cuarto-one> </div> <div class = cuarto> </div> </body>

El tercer fenómeno:

Si todos los elementos flotan y el ancho restante del elemento principal no es suficiente para apoyar la disposición de los elementos infantiles en esa fila, entonces se conectará al nivel superior

Este artículo se reproduce de: https://segmentfault.com/a/1190000022669455

Resumir

Este es el final de este artículo sobre un breve análisis del uso del flotador flotante HTML. Para obtener un contenido flotante flotante HTML más relacionado, busque artículos anteriores de Wulin.com o continúe navegando por los artículos relacionados a continuación. ¡Espero que todos apoyen a Wulin.com en el futuro!