¿Cómo limpiar los flotadores?

Cómo limpiar el flotador

1. Establezca la altura del elemento principal (generalmente no se recomienda)
2. Sintaxis clara:

Selector {borrar: valor de atributo} borrar: borrar

Valor de atributo	descripción
izquierda	No permitir elementos flotantes a la izquierda (borre el efecto de flotar a la izquierda)
Derecha	No permitir elementos flotantes a la derecha (borre el efecto de flotar a la derecha)
ambos	Al mismo tiempo, elimine el impacto de flotar en los lados izquierdo y derecho.

ps: en el trabajo real, casi solo usamos clear: both

3. Método de etiquetado adicional (método de tabique)

是在w3c推荐的做法是通过在浮动元素末尾添加一个空的标签，例如：<div style="clear:both"></div>或者其他标签（br）即可。

• Ventajas: fácil de entender, fácil de escribir.

• Desventajas: agregue muchas etiquetas sin sentido, estructura pobre

Cuarto, el padre agrega el método de atributo de desbordamiento

可以给父级添加：overflow为hidden|auto|scroll  都可以实现

• Ventajas: código simple
• Desventajas: cuando el contenido es grande, es fácil hacer que el contenido se oculte sin un ajuste automático de línea y es imposible mostrar los elementos que deben desbordarse

Cinco, use el pseudo elemento after para borrar el flotador

  ：after方式为空元素额外标签法的升级版，好处是不用单独加标签了

Instrucciones:

.clearfix:after{
	content:"";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.clearfix{
	*zoom:1;/* IE6、7 专有 */
}

• Ventajas: De acuerdo con la idea flotante cerrada, la estructura es semánticamente correcta
• Desventajas: Dado que IE6-7 no admite: after, use zoom: 1 para activar hasLayout.
• Sitios web representativos: Baidu, Taobao, Netease, etc.

Seis, use pseudoelementos dobles para borrar flotantes

Instrucciones:

.clearfix:after,:clearfix:before{
	content:"";
	display:table;
}
.clearfix:after{
	clear:both;
}
.clearfix{
	*zoom:1;/* IE6、7 专有 */
}

• Ventajas: el código es más conciso
• Desventajas: Dado que IE6-7 no admite: after, use zoom: 1 para activar hasLayout.
• Sitios web representativos: Xiaomi, Tencent, etc.

Resumen flotante claro:

1. El padre no tiene altura
2. Cuadro infantil flotante
3. Afecta el siguiente diseño,

Maneras de limpiar flotadores	ventaja	Desventaja
Método de etiqueta adicional (método de tabique)	Fácil de entender y de escribir	Agrega muchas etiquetas sin sentido
父 级 desbordamiento ： oculto ；	Simple de escribir	Desbordamiento escondido
Padre después del pseudo elemento	La estructura es semánticamente correcta	Porque IE6-7 no admite: después, problemas de compatibilidad
Pseudo elemento doble padre	La estructura es semánticamente correcta	Porque IE6-7 no admite: después, problemas de compatibilidad