Según la especificación CSS, los elementos flotantes se eliminan del flujo del documento y no afectan el diseño de los cuadros de bloque, sino sólo la disposición de los cuadros en línea (normalmente texto). Por lo tanto, cuando su altura excede la del contenedor contenedor, el contenedor principal general no se estirará automáticamente para cerrar el elemento flotante. Pero a veces necesitamos este comportamiento de cierre automático. ¿Cómo solucionarlo?
Una forma de hacerlo es insertar una etiqueta adicional en el contenedor principal y dejar claro que se debe expandir el contenedor principal. Este método tiene buena compatibilidad con el navegador y no tiene problemas. La desventaja es que requiere etiquetas adicionales (y generalmente semánticamente no semánticas), por lo que personalmente no me gusta.
Más tarde, hubo una nueva forma, usando la pseudoclase :after para incrustar dinámicamente un elemento para borrar flotantes. Este método tiene el mismo principio que el anterior, excepto que el contenido adicional se genera con CSS, pero considere que IE no lo hizo. soporte: después y tuve que hacer muchos trucos. Este método tiene compatibilidad general, pero puede manejar diferentes navegadores mediante varios trucos. Al mismo tiempo, puede garantizar que el HTML esté relativamente limpio, por lo que todavía se usa con más frecuencia.
Más tarde, alguien descubrió que establecer el desbordamiento del contenedor principal en un valor distinto del visible puede cerrar el elemento flotante en un navegador compatible con el estándar. Naturalmente, IE no lo admite, por lo que este método es tan válido como el método anterior. realiza un procesamiento diferente (específicamente activa el diseño). La diferencia es que el desbordamiento no es tan problemático como la pseudoclase: after. También tiene deficiencias.
Antes de usar desbordamiento, había otra forma de usar float, que era hacer que el contenedor principal flotara. Esto aprovecha una característica de los elementos flotantes: los elementos flotantes cerrarán los elementos flotantes. Este método tiene buenos resultados en IE/Win y en navegadores compatibles con estándares, pero la desventaja también es obvia: es posible que el contenedor principal no flote solo porque quiere flotar. Después de todo, flotar es un comportamiento especial y, a veces, el diseño no lo es. Es correcto dejarlo flotar. Aunque los elementos flotantes se pueden cerrar en IE y en los navegadores compatibles con los estándares, el principio es diferente en IE/Win, el elemento flotante activa el diseño y, por lo tanto, cierra el elemento flotante en los navegadores compatibles con los estándares. El principio de desbordamiento en este método es el mismo, lo que da como resultado un "rango de formato a nivel de bloque": este es un fenómeno mencionado en la especificación CSS. A menudo tiene cierta independencia. Una de sus características es que cerrará automáticamente el flotante interno. . elemento.
Por especificación, los siguientes tipos de elementos dan como resultado un alcance de formato a nivel de bloque:
● Los elementos flotantes pueden ser izquierdo o derecho.
● Elementos absolutamente posicionados.
● Elemento de bloque en línea, pero este gecko no lo admite actualmente.
● elementos de tipo table-cell. De hecho, table, table-head-group, table-row, etc. también son aceptables, así como inline-table (no admitidos por gecko), porque todos generan indirectamente una tabla anónima. celúla.
● Desbordamiento es un elemento cuyo valor no es visible.
Por lo tanto, resulta que en los navegadores compatibles con los estándares, también podemos tener tantos métodos para cerrar un elemento flotante, y solo se necesita CSS, no se necesita nada más. Por cierto, además del desbordamiento, lo anterior tiene el efecto adicional de reducir automáticamente el ancho del contenedor principal.
Para IE/Win, tiene su propio sistema, que es el diseño. Los elementos con diseño cerrarán automáticamente los elementos flotantes. Echemos un vistazo a las propiedades CSS que activan el diseño. Encontrará que existen muchas similitudes con el formato a nivel de bloque. rango superior:
● Elementos flotantes ● Elementos absolutamente posicionados ● display:inline-block
● ampliar
● ancho/alto
● overflow/overflow-x/overflow-y [Nuevo en IE7]
● ancho/alto máximo/mínimo [Nuevo en IE7]
De lo anterior, hay muchas formas de cerrar elementos flotantes en IE y, naturalmente, todas tienen sus limitaciones. Tienen efectos secundarios o utilizan atributos no estándar (que no pueden pasar la verificación).
Otra cosa para mencionar es display:inline-block. Este atributo en sí no es de utilidad para IE. El efecto real es solo agregar diseño en secreto a un elemento. Sin embargo, los navegadores que cumplen con los estándares reconocen este atributo, por lo que no los afecta. Para el navegador, debe volver a configurar la pantalla a los valores predeterminados. Hay un error en IE aquí. Si primero define display:inline-block y luego vuelve a configurar la pantalla en bloque (estas dos pantallas deben colocarse en dos declaraciones CSS una tras otra para que tengan efecto), entonces el diseño lo hará. no desaparecerá y, al mismo tiempo, el diseño no desaparecerá. No afectará a otros navegadores, por lo que por ahora, esta también es una buena forma de activar el diseño:
| .gainlayout{display:inline-block;} .gainlayout{display:bloque;} |
Por lo tanto, hay muchas formas de cerrar elementos flotantes en todos los navegadores. Cómo usar estas propiedades CSS juntas requiere un análisis detallado de la situación específica. También es necesario aplicar comentarios condicionales de manera flexible. Si realmente no funciona, podemos hacerlo. atrás y usar claro Se puede usar.