Prólogo:
en navegadores que no son IE (como Firefox), cuando la altura del contenedor es automática y hay elementos flotantes (el flotador es izquierdo o derecho) en el contenido del contenedor, en este caso, la altura del contenedor no puede ser extendido automáticamente Para adaptarse a la altura del contenido, el contenido se desborda fuera del contenedor y afecta (o incluso destruye) el diseño, fenómeno que se denomina desbordamiento flotante. El procesamiento CSS para prevenir este fenómeno se llama CSS Clear Float.
Limpiar el flotador es principalmente para resolver el problema del colapso de la altura interna del elemento padre debido a la flotación del elemento hijo.
¿Por qué usar flotador?
Al principio, la flotación es solo para resolver el problema del texto envuelto alrededor de la imagen, pero al final es para resolver el problema de mostrar varios elementos a nivel de bloque uno al lado del otro, aunque puede usar la visualización de definir bloque- Los elementos de nivel deben estar en bloque en línea (de esta manera no aparecerá el problema del colapso del elemento padre) Pero este método no puede controlar la posición del elemento sino de izquierda a derecha por defecto, por lo que es más conveniente usar float para darse cuenta de si el elemento es izquierdo o derecho. Sin embargo, si el flotador no se borra después de usarlo, se producirá el problema de colapso de la altura principal.
Ejemplos:
Código básico del código HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style>
#parent{
border: 1px solid black;
}
#child{
width: 100px;
height: 100px;
background: red;
float: left;
}
</style>
</head>
<body>
<div id="parent">
<div id="child"></div>
</div>
</body>
</html>
Imagen de efecto ----- Imagen de efecto flotante sin borrar
----- Flotante despejado
Cuando el flotador está configurado para el elemento hijo, si no se borra el flotador, el elemento padre colapsará en altura. Entonces, cuando configuramos la flotación, debemos resolver el impacto de la flotación. ¡Ahora presentaremos varias formas de limpiar los flotadores!
Método 1: método de etiquetado adicional
Para quién limpiar el flotador, agregue una etiqueta en blanco adicional después y establezca clear: both.
Ventajas: fácil de entender y de escribir.
Desventajas: se agregan muchas etiquetas sin sentido y la estructura es relativamente pobre.
claro: ambos: La esencia es cerrar el flotador, es decir, dejar que la caja principal cierre la salida y la entrada, y evitar que salga la caja secundaria.
estilo CSS
#clear{
clear: both;
}
código HTML
<div id="parent">
<div id="child"></div>
<!-- 方法一 额外标签法 -->
<div id="clear"></div>
</div>
Método 2: agregar desbordamiento: oculto para el elemento principal
Activando el método BFC, para borrar el flotador
Ventajas: código conciso
Desventajas: cuando el contenido aumenta, es fácil hacer que el contenido se oculte sin el ajuste automático de línea y es imposible mostrar los elementos que se desbordan.
estilo CSS
#parent{
overflow: hidden;
}
Método 3: use el pseudo-elemento after para borrar el flotador
Ventajas: De acuerdo con la idea de flotación cerrada, la estructura es semánticamente correcta.
Desventajas: ie6-7 no admite pseudo-elemento: después, use zoom: 1 para activar hasLayout.
estilo CSS
#parent:after{
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
#parent{
/* 触发 hasLayout */
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
Método 4: usar antes y después de pseudoelementos dobles para borrar el flotador
Ventajas: el código es más conciso
Desventaja: utilice el zoom: 1 para activar hasLayout.
estilo CSS
#parent:after,#parent:before{
content: "";
display: table;
}
#parent:after{
clear: both;
}
#parent{
*zoom: 1;
}
Método cinco: establezca la altura del elemento principal
Desventajas: es necesario agregar la altura manualmente, si la altura cambia más tarde, debe modificar la altura nuevamente, lo que causará problemas para el mantenimiento posterior.
Ventajas: Sencillo y rudo, directo y eficaz, eliminando el impacto de flotar.