La flotación clara es algo que todos los que crean páginas encontrarán, pero ¿pueden todos saberlo con claridad y comprenderlo de manera integral? Así que escribí un artículo como este tan pronto como tuve algo de tiempo libre. No puedo cubrirlo todo, pero básicamente puedo enseñarles a todos lo que sé.
Echemos un vistazo aproximado a cuántos métodos existen para borrar los flotantes (no escribiré sobre el uso de zoom:1 en IE, pero lo haré en el siguiente tema). DEMOSTRACIÓN correspondiente
- Utilice pseudoclase: después para borrar la capa de pseudoclase con una altura de cero para el control vacío posterior.
- Utilice CSS overflow:auto para soportar la altura
- Usando CSS overflow:hidden para producir adaptaciones extrañas
- Utilice display:table para convertir el objeto en forma de tabla
- Utilice la etiqueta div y el atributo clear de css
- Utilice la etiqueta br y el atributo clear de css
- Utilice la etiqueta br y su propio atributo HTML clear
A primera vista, ambos pueden resolver el problema; sin embargo, tienen sus pros y sus contras. (correspondencia uno a uno)
- La semántica de la estructura de ventajas es completamente correcta y no surgirán otros problemas extraños.
Desventajas Los métodos de reutilización inadecuados pueden conducir fácilmente a un fuerte aumento en el volumen de código.
Se recomienda utilizarlo cuando la capa más externa flote ligeramente o para personas que comprendan el método de reutilización modular. - Ventajas : La semántica de la estructura es completamente correcta y la cantidad de código es muy pequeña.
Desventajas : Después de varios anidamientos, hacer clic en el cuadro flotante ligero más externo hará que se seleccione todo el contenido desde la capa más externa hasta la capa más interna (FF) o cuando el mouseover haga que el ancho cambie, el módulo más externo tendrá un desplazamiento; barra (IE).
Se recomienda utilizar el módulo dentro de uno, no anidarlo. - Ventajas : La semántica de la estructura es completamente correcta y la cantidad de código es muy pequeña.
Desventajas: cuando aumenta el contenido, es fácil ajustar líneas automáticamente y el contenido se oculta.
Se recomienda utilizar cuando el ancho sea fijo y no se aniden. - Ventajas : La semántica de la estructura es completamente correcta y la cantidad de código es muy pequeña.
Las propiedades del modelo de caja de deficiencias han cambiado. Es concebible que haya más eventos extraños de los que puedas contar.
Se recomienda que si no desea corregir el error y matarlo, es mejor no usarlo; sin embargo, puede usarse como un engaño temporal en la versión alfa para realizar pruebas; - Ventajas: la cantidad de código es muy pequeña y la reutilización es extremadamente alta.
La desventaja es que no puede adaptarse perfectamente a la semántica y no favorece revisiones y cambios de demanda.
Recomendado para principiantes, permite resolver rápidamente problemas de flotación. - Ventajas: el grado de semántica es mejor que el del quinto caso; la cantidad de código es muy pequeña y la reutilización es extremadamente alta.
Desventajas: la semántica aún no es perfecta, lo que no propicia revisiones y cambios exigidos.
Recomendado para principiantes, permite resolver rápidamente problemas de flotación. - Ventajas: El grado de semántica es mejor que el de los casos 5 y 6; la cantidad de código es mínima y la reutilización es extremadamente alta.
Desventajas: la semántica aún no es perfecta, lo que no propicia revisiones y cambios exigidos.
Se recomienda guiar a los principiantes para que lo utilicen cuando actualicen su pensamiento, para que comprendan que en lugar de usar el nombre de clase para controlar un rendimiento, es mejor volver a la era WEB1.0 de las páginas web y usar directamente atributos html para controlar el rendimiento. Después de todo, este último tiene menos código.
Finalmente, la lista está completa. Sin embargo, creo que es necesario disculparme con todos por el artículo que reimprimí sobre Ghost; lamento mucho haber cambiado el título de Ghost de "más fácil" a "óptimo", lo que luego engañó a muchos estudiantes. Así que reescribí un artículo para compartirlo con ustedes.
Texto original: http://webteam.tencent.com/?p=1122
