Mucha gente ha estudiado el problema del cierre de elementos flotantes, pero las soluciones son diferentes y no todos los métodos son perfectos. Cerrar elementos flotantes (o borrar elementos flotantes) es un problema que se encuentra a menudo en el diseño estándar web. Por lo tanto, aquí me gustaría resumir varios métodos comúnmente utilizados y comparar su facilidad de uso y entornos aplicables. Si tiene una manera mejor, póngala a discutir.

El caso más simple es que incluimos un elemento div pequeño de ancho fijo (como navegación, referencia, etc.) en un div grande junto con el contenido de otro elemento. Por ejemplo, el siguiente código:

Podemos establecer un valor de ancho (por ejemplo, 20%) para "#inner", pero como div es un elemento a nivel de bloque, incluso si configuramos el ancho, el contenido detrás de él solo se puede mostrar en la siguiente línea a menos que dale Establece una propiedad flotante (ya sea flotante hacia la izquierda o flotante hacia la derecha). Entonces surgirá el problema que mencionamos anteriormente en este momento.

Esto no será un problema si "#inner" tiene un ancho y alto menores que "#outer".

Sin embargo, si la altura de "#inner" excede la altura de "#outer", entonces la parte inferior de "#outer" excederá la parte inferior de "#outer". Esto se debe a que después de configurar el atributo flotante para "#inner", se separará del flujo de texto y, sin importar cómo cambien su ancho y alto, "#outer" no seguirá el cambio.

Solución:

1) Método de etiquetas adicionales

El primer método y el método recomendado por el W3C es utilizar etiquetas adicionales. Este método consiste en agregar una etiqueta vacía al final del contenido. Un enfoque típico es utilizar algo como:

O usar

Este método fuerza al contenedor externo a expandirse agregando un elemento HTML. Sin embargo, este método agregará etiquetas adicionales y hará que la estructura HTML parezca menos concisa.

Nota: Descubrí que en Internet Explorer (ya sea 6 o 7)
puede borrar elementos flotantes, pero no puede cerrar elementos flotantes. Este problema no existe en Firefox. No sé por qué. ? !

2) Utilice la pseudoclase posterior

para agregar contenido nuevo al final del contenido actual especificado utilizando la pseudoclase posterior y la declaración de contenido. Un enfoque común es agregar un "punto" porque es más pequeño y menos perceptible. Luego lo usamos para borrar el elemento flotante (cerrar el elemento flotante) y ocultar el contenido:
#exterior:después{
contenido:".";
altura: 0;
visibilidad: oculta;
mostrar:bloquear;
claro: ambos;

Lo extraño es que Internet Explorer 6 y versiones anteriores en Windows no admiten la pseudoclase posterior en CSS 2.1, pero Internet Explorer en Mac se puede usar normalmente, por lo que tenemos que tratar con Win/IE por separado. Entre los muchos métodos para distinguir entre Internet Explorer en Win y Mac, el método más utilizado es el truco de Holly, código CSS:
/* Este código sólo puede ser visto por IE/Win*/
reglas CSS
/*End Hack */

Hay dos líneas de comentarios en el código anterior y aparece una barra invertida () al final de la primera línea. Internet Explorer en Mac pensará que el comentario no ha finalizado, por lo que continúa hasta el final. Primera línea. Aparece un "*/" completo y todos los caracteres del medio se consideran comentarios, pero IE/Win solo considerará la primera y tercera líneas como comentarios, y los del medio son códigos válidos. Entonces esto distingue a IE en diferentes plataformas.

Según los principios anteriores, para limpiar elementos flotantes en IE 6 en Windows, puede utilizar el siguiente código:

#exterior {
pantalla: bloque en línea;
}
/* Comienza el truco de Holly */
* html #exterior {
altura: 1%;
}
#exterior {
mostrar:bloquear;
}
/* Fin del hackeo */

PD: Si no considera usuarios de IE6/Mac, solo necesita escribir * html #outer {height:1%;}.
Además, parece que display:inline-block no funciona bien en Internet Explorer 7. Así que utiliza los trucos Hack más completos.

3) Flotar elementos externos El

método float-in-float es muy simple, que consiste en hacer flotar el elemento "#outer" (hacia la izquierda o hacia la derecha).

Sin embargo, otro problema causado por este método es que el siguiente elemento adyacente a "#outer" se verá afectado por "#outer" y su posición cambiará, por lo que debes tener cuidado al utilizar este método. Existe una opción para hacer flotantes todos los elementos en la página y, finalmente, usar un elemento significativo apropiado (como un pie de página) para limpiar los flotantes. Esto ayuda a reducir el marcado innecesario, pero demasiados flotantes aumentarán la dificultad del diseño.

4) Establezca el desbordamiento en oculto o automático.

Establezca el valor de desbordamiento del atributo "#outer" en oculto o automático para limpiar también los elementos flotantes

. Pero tenga cuidado al utilizar el desbordamiento porque afecta el rendimiento del navegador. Además, simplemente configurar el desbordamiento en oculto o automático en Internet Explorer 6 no puede borrar efectivamente el elemento flotante (cerrar el elemento flotante). También debe especificar una dimensión de "#exterior", es decir, especificar un ancho o un alto para él. :
#exterior {
desbordamiento:automático;
ancho: 100%;
}

Nota: Si desea utilizar este método para borrar elementos flotantes (cerrar elementos flotantes) en IE5/Mac, debe configurar el atributo de desbordamiento en oculto.

Compara y elige

cuál de los cuatro métodos es mejor. En primer lugar, no se recomienda utilizar la pseudoclase posterior. En comparación con los otros tres métodos, el truco de Holly es demasiado engorroso y difícil de dominar. El truco de Holly que mencioné anteriormente no es solo un problema en IE/. Cuando aparezca: hover, también habrá otros problemas, por lo que agregamos atributos como inline-block, lo que significa que hay más incertidumbre en este método. Recomendado para personas "limpias" en cuanto a código y con altas habilidades técnicas.

Entonces se pueden considerar los otros tres métodos. Sin embargo, cuando se utiliza el desbordamiento, puede tener un impacto en el rendimiento de la página, y este impacto es incierto. Es mejor probar su página en varios navegadores

y usar etiquetas adicionales para borrar los elementos flotantes (cerrar el elemento flotante) es una práctica recomendada. por el W3C. En cuanto a si usar elementos
o