[css:float causado por colapso de altura y solución]

---

prefacio

1. Demanda

El botón siempre debe flotar en el lado derecho, y la tabla a continuación también debe llenar la pantalla.

2. Problemas encontrados y soluciones evolutivas

El botón siempre está en el lado derecho, lo que se puede resolver usando float, y al mismo tiempo se calcula la altura del elemento, para controlar la altura de la mesa en tiempo real. Sin embargo, cuando se encuentra este tipo de problema, cuando el atributo flotante está en efecto (la situación en la Figura 1), la altura del nodo no se puede calcular y la altura de la tabla no se puede establecer con precisión. El problema se convierte en resolver el problema del colapso causado por el flotador.

1. ¿Qué es el colapso alto?

En pocas palabras, el colapso de la altura significa que los elementos secundarios contenidos en el elemento principal están flotando. Cuando no se establece la altura del elemento principal, se convertirá en una línea porque no hay elementos secundarios para "expandir".

2. Cómo solucionar el derrumbe alto

1. La mayoría de las soluciones.

① Agregue una altura fija al elemento principal.

Contras: no apto para diseños altamente adaptables.

② Agregar desbordamiento: oculto al elemento principal;

Desventajas: no apto para usar con diseños de página que se han colocado

③ Agregue una etiqueta vacía a todos los cuadros flotantes, como div, y agregue una declaración clear:both;

Desventajas: hay muchas etiquetas vacías, lo que genera redundancia de código

④ Para el elemento principal colapsado: after{content: "";display:block;clear:both;visibility:hidden;}

Desventajas: Relativamente problemático

2. La solución que introduje

①Agregue display:flow-root al elemento principal.

Este método no tendrá efectos secundarios. Nació para resolver el colapso de altura y generar un cuadro de elemento a nivel de bloque. Sin embargo, debido al método de diseño introducido en 2019, no puede admitirse en navegadores relativamente antiguos.

---