¿Por qué flotadores transparentes?
(Borrar el flotador es principalmente para resolver el problema de que la altura interna del elemento padre es 0 debido a la flotación del elemento hijo)
1. De la siguiente manera, establezco un límite para el cuadro principal y coloco dos cuadros dentro, uno grande y otro pequeño. Si no se establece ningún flotante para grande y pequeño, abrirán el cuadro principal de forma predeterminada
2. Cuando agrego atributos flotantes a los dos cuadros internos
Aparecerá el cuadro azul oscuro en la parte superior, y luego el cuadro principal se convertirá en una línea porque la altura no está establecida, y grandes y pequeños han flotado
En conclusión:
-
Cuando el elemento padre no da altura,
-
Cuando los elementos internos no flotan, se extenderán
-
Cuando flota, el elemento padre se convierte en una línea
En este momento, mucha gente pensará en la nueva etiqueta clara: ambos métodos y flotante, ¡pero estos dos métodos no son recomendados!
Lo que está claro: ambos
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
Formas de limpiar los flotadores (las 4 más utilizadas)
1. Método de etiquetado adicional
(Después de la última etiqueta flotante, agregue una nueva etiqueta y establezca clear: both;) (no recomendado)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.fahter{
width: 400px;
border: 1px solid deeppink;
}
.big{
width: 200px;
height: 200px;
background: darkorange;
float: left;
}
.small{
width: 120px;
height: 120px;
background: darkmagenta;
float: left;
}
.footer{
width: 900px;
height: 100px;
background: darkslateblue;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="fahter">
<div class="big">big</div>
<div class="small">small</div>
<div class="clear">额外标签法</div>
</div>
<div class="footer"></div>
</body>
</html>
en este momento
Si borramos el flotador, el elemento padre detecta automáticamente la altura más alta de la caja secundaria y luego la misma altura.
Ventajas: fácil de entender y conveniente
Desventajas: agregar etiquetas sin sentido, semántica deficiente
No recomendado para su uso.
2. Agregue el atributo overflow al padre
(Agregar desbordamiento: oculto para el elemento principal) (no recomendado)
Al activar el método BFC, la flotación se borra
.fahter{
width: 400px;
border: 1px solid deeppink;
overflow: hidden;
}
Ventajas: código simple
Desventajas: cuando el contenido aumenta, es fácil hacer que el contenido se oculte sin el ajuste automático de la línea, y es imposible mostrar los elementos que se desbordan
No recomendado
3. Utilice el pseudo elemento after para borrar el flotador (recomendado)
.clearfix:after{
/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: " ";/* content中包含的空格也能生效，旧版本Opera浏览器中有个隐藏的bug，需要添加一个空格字符才能解决 */
display: block;
clear:both;
/*
下面两个属性取消后，也可以清除浮动。
我个人理解如下，为了保证after不在界面显示，所以使用了下方属性。
*/
height: 0;/* 高度为0，隐藏元素 */
visibility: hidden;/* 元素隐藏，原位置还在 */
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
<body>
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
<!--<div class="clear">额外标签法</div>-->
</div>
<div class="footer"></div>
</body>
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.
Uso recomendado
4. Úselo antes y después de pseudoelementos dobles para limpiar los flotadores (recomendado)
/* 提示：当我们不想要外边距折叠（重叠取最大值）时，这个版本的清除浮动非常有效 */
.clearfix:after,.clearfix:before{
content: " ";/* content中包含的空格也能生效，旧版本Opera浏览器中有个隐藏的bug，需要添加一个空格字符才能解决 */
/* 外边距无法通过单元格元素折叠 */
display: table;/* 防止伪元素外边距折叠 */
}
/* 只有after伪元素需要清除浮动 */
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
</div>
<div class="footer"></div>
Ventajas: el código es más conciso
Desventajas: Utilice zoom: 1 para activar hasLayout.
Este artículo ha sido reimpreso por otros blogueros. Si hay alguna infracción, por favor contacte para borrar la
fuente de la reimpresión: https://blog.csdn.net/h_qingyi/article/details/81269667
Descripción : Parte del contenido original, he eliminado y agregado (Libro de referencia: Análisis en profundidad de CSS).