¿Cuáles son las formas de limpiar los flotadores?

Referencia: CSS flotante y 5 formas de borrar flotante

1. ¿Por qué limpiar flotadores?

1. Flujo estándar: cada una de las cajas ocupará toda la fila. Si el cuadro secundario es un flujo estándar, aunque el cuadro principal no tiene altura, extenderá la altura del cuadro principal.
2. Flotante: La caja flota y no ocupará su posición original. Si la caja principal no tiene una altura definida, la caja principal no se abrirá y la altura de la caja principal es 0. Nota : (La flotación permite que se muestren varios elementos a nivel de bloque en una línea y no hay espacio entre los bloques, pero preste atención para borrar el flotador del cuadro principal, de lo contrario, el cuadro principal no se estirará).

Por lo tanto, limpiar el flotador es principalmente para resolver el problema de que la altura interna del elemento padre es 0 causado por el flotador hijo .

2. Cómo limpiar el flotador

1. El div padre define una pseudoclase:after y se zoomrecomienda

.clearfix:after{
    content:"";  /*设置内容为空*/
    height:0;  /*高度为0*/
    line-height:0;  /*行高为0*/
    display:block;  /*将文本转为块级元素*/
    visibility:hidden;  /*将元素隐藏*/
    clear:both;  /*清除浮动*/
}
.clearfix{
    zoom:1;  /*为了兼容IE*/
}

Ventajas: el soporte del navegador es bueno, no es propenso a problemas extraños.
Desventajas: se deben combinar dos frases de código para que los navegadores convencionales sean compatibles
2. Agregue una etiqueta div en blanco al final y utilícelaclear:both principalmente

//对添加的元素使用 clear:both
.clear{clear:both;}
<div class="box">
    <div class="red" style="float:left;">1</div>
    <div class="sienna" style="float:left;">2</div>
    <div class="blue" style="float:left;">3</div>
    //添加一个新元素
    <div class="clear"></div>
</div>

Ventajas: simple, menos código, buen soporte del navegador, no propenso a problemas extraños.
Desventajas: si hay muchos diseños flotantes en la página, se deben agregar muchos divs vacíos

3. Definición de div principal : overflow:hidden
   ventajas: simple, menos código, buena compatibilidad con el navegador.
   Desventajas: ancho o zoom: se debe definir 1 y no se puede usar con posición

4. El div padre define la altura.
   Ventajas: simple, menos código.
   Desventajas: solo es adecuado para diseños de altura fija, y se deben proporcionar alturas precisas

5. Definición de div principaloverflow:auto
   Ventajas: simple, menos código, buen soporte del navegador
   Desventajas: aparecerán barras de desplazamiento cuando el ancho y la altura internos excedan el div principal