¿Cómo borrar HTML flotante?

Primero, creamos una página html simple. El elemento principal es un div y el elemento interno son dos uls. Los dos uls están flotando hacia la izquierda. Y agregue un borde al elemento padre.

2/7

Podemos encontrar que el elemento principal no se estira en absoluto por la altura del elemento secundario, sino que solo mantiene la altura de la etiqueta h. Esto es flotante. , Resultando en .

3/7

La limpieza de flotadores, como su nombre indica, es clara: ambos. Este es de hecho un método, pero debemos determinar dónde se aplica nuestro claro: ambos.

4/7

Podemos agregar un div después del último elemento flotante en la página html y configurar su estilo para borrar: ambos.

5/7

También podemos agregar pseudoclases a los elementos principales de los elementos flotantes, *::after{content""; Esto hará que la flotación se detenga aquí

6/7

Además de estos, también podemos agregar el atributo de desbordamiento al elemento principal, que se puede configurar como oculto o automático

7/7

Los tres métodos anteriores son resumidos por el propio Xiaoyu a través de su experiencia personal. El efecto de visualización de página correcto es como se muestra en la figura