Css: impacto y soluciones de float

Recomendamos dos métodos para borrar los flotadores confiando en clear. Recomendamos el segundo método, la exploración se registrará más adelante. Si tiene prisa, simplemente lea el principio.

1. Antes de la etiqueta de cierre del elemento principal sujeto al colapso flotante, agregue un div vacío con una altura y ancho de 0, y luego establezca clear:both

2. Cree un estilo clearfix y luego use elementos de pseudoclase para agregar estilos al elemento principal

Ya sea un elemento a nivel de bloque o un elemento en línea, después de configurar float, se generará un cuadro a nivel de bloque , y su ancho y alto se pueden editar. En este momento, el elemento float se elimina del flujo de documentos. Por ejemplo, piense en la página web como una piscina tridimensional, con el documento fluyendo en el fondo de la piscina. Después de configurar la flotación para un elemento en el flujo de documentos, flotará desde el fondo de la piscina en la web. página al agua. En este momento, los elementos a nivel de bloque del mismo nivel se distribuirán independientemente de la posición del elemento flotante en la página web. Pero el elemento en línea no quedará oscurecido, sino que rodeará al elemento flotante como si estuviera flotando en el agua con él.

Según la introducción anterior, después de configurar el elemento como flotante, parecerá flotar desde la página web y separarse del flujo de documentos. En este caso, si el elemento principal no tiene originalmente una altura establecida, se planea utilizar elementos secundarios para expandir el elemento principal. En este momento, el elemento secundario flota debido a la flotación y la altura del elemento principal colapsará porque no está configurada.

Tomemos un ejemplo (la siguiente discusión se basará en este ejemplo, por lo que la estructura HTML y el estilo CSS se darán primero):

Abramos las herramientas de desarrollador y tomemos un una mirada más cercana

p>

Luego, hagamos flotar el elemento padre juntos

Por ejemplo:

En este momento, ch2 con un color de fondo rosa se vuelve semitransparente porque el color de fondo flotante ch1 está cubierto, pero la fuente de ch2 aún rodea a ch1

Si ch2 también flota, entonces ch1 y ch2 equivalen a flotar en la superficie de la web. piscina juntos.

Además, aunque ch2 será bloqueado por el mismo nivel ch1 cuando no esté flotante, los elementos en línea dentro de ch2 rodean a ch1. Al mismo tiempo, los elementos a nivel de bloque dentro de ch2 seguirán bloqueados. por el ch1 flotante.

Para resolver el problema del colapso de la altura del elemento principal, en realidad puede especificar una altura para el elemento principal, pero esto no tendrá el significado de que la altura del elemento principal sea adaptable; , flotar todos los elementos juntos también puede resolver el problema del colapso del elemento padre y el problema del bloqueo de los elementos secundarios, pero esto esencialmente simplemente hace flotar todos los elementos hacia arriba juntos, lo que no resuelve el problema, pero lo hará. También afecta la disposición de otros elementos. A continuación se presenta el atributo clear para borrar flotantes

Primero echemos un vistazo al uso del atributo clear

Cambiemos ligeramente el ejemplo anterior, agreguemos una etiqueta p debajo de ch2 y luego cambiar Los estilos de ch1 y ch2 los hacen diferentes en altura.

¿Qué pasa si también agregamos float al elemento p en este momento?

Muestra: