Cuando se utiliza el diseño de páginas web DivCSS, a menudo se utilizan flotantes. Hay muchas introducciones para eliminar flotantes en el pasado. Borrar los flotantes es imprescindible, y borrar los flotantes de los elementos principales en cualquier momento se considera uno de los buenos hábitos al escribir CSS.
Veamos el tutorial de hoy. Este es un código fuente flotante que no se ha borrado. No puede ver el fondo amarillo claro del elemento principal cuando ejecuta el código.
Código fuente de ejemplo
[www.downcodes.com]
*{margen:0;relleno:0;}
cuerpo {fuente: 36px negrita; color: #F00; alineación de texto: centro;}
#diseño{fondo:#FF9;}
#left{float:left;ancho:20%;alto:200px;fondo:#DDD;alto de línea:200px;}
#right{float:right;ancho:30%;alto:80px;fondo:#DDD;alto de línea:80px;}
–>
Como se muestra en la figura antes de limpiar el flotador:
1. Utilice etiquetas vacías para borrar los flotadores Un método que he usado durante mucho tiempo es que la etiqueta vacía puede ser una etiqueta div o una etiqueta P. Estoy acostumbrado a usar
, que es bastante corto. Muchas personas también usan
, pero solo necesitan borrar el borde, pero en teoría puede ser cualquier etiqueta. Este método consiste en agregar dicha etiqueta para borrar el flotador después de que todos los elementos flotantes dentro del elemento principal flotante deban borrarse y definir el código CSS para ello: borrar: ambos. La desventaja de este enfoque es la adición de elementos estructurales sin sentido.
Código fuente de ejemplo
[www.downcodes.com]
*{margen:0;relleno:0;}
cuerpo {fuente: 36px negrita; color: #F00; alineación de texto: centro;}
#diseño{fondo:#FF9;}
#left{float:left;ancho:20%;alto:200px;fondo:#DDD;alto de línea:200px;}
#right{float:right;ancho:30%;alto:80px;fondo:#DDD;alto de línea:80px;}
.clr{claro:ambos;}
–>
Este método resuelve efectivamente la desventaja de tener que agregar código no intencional al borrar los elementos flotantes a través de elementos de etiqueta vacíos. Para utilizar este método, solo necesita definir la propiedad CSS: overflow:auto en el elemento que desea eliminar de la flotación, ¡y listo! "zoom:1" es para compatibilidad con IE6.
Código fuente de ejemplo
[www.downcodes.com]
*{margen:0;relleno:0;}
cuerpo {fuente: 36px negrita; color: #F00; alineación de texto: centro;}
#layout{fondo:#FF9;overflow:auto;zoom:1;}
#left{float:left;ancho:20%;alto:200px;fondo:#DDD;alto de línea:200px;}
#right{float:right;ancho:30%;alto:80px;fondo:#DDD;alto de línea:80px;}
–>
Este método sólo se aplica a navegadores que no son IE. Consulte los siguientes ejemplos para conocer métodos de escritura específicos. Preste atención a los siguientes puntos durante el uso. 1. En este método, se debe establecer la altura: 0 para el pseudoobjeto que necesita borrar el elemento flotante; de lo contrario, el elemento será varios píxeles más alto que el valor real. 2. El atributo de contenido es necesario, pero su valor puede ser; vacío, discusión ideal azul En este método, el valor del atributo de contenido se establece en ".", pero descubrí que también es posible dejarlo vacío.
Código fuente de ejemplo
[www.downcodes.com]
*{margen:0;relleno:0;}
cuerpo {fuente: 36px negrita; color: #F00; alineación de texto: centro;}
#diseño{fondo:#FF9;}
#layout:after{display:block;clear:both;content:”";visibilidad:hidden;height:0;}
#left{float:left;ancho:20%;alto:200px;fondo:#DDD;alto de línea:200px;}
#right{float:right;ancho:30%;alto:80px;fondo:#DDD;alto de línea:80px;}
–>
Como se muestra en la figura después de flotar claramente:
Cada uno de estos tres métodos tiene ventajas y desventajas, y debes elegir el mejor al usarlos. En comparación, el segundo método es más preferible.
