Requisitos de diseño de la página web, el flujo estándar no puede satisfacer nuestras necesidades, por lo que tenemos que flotar para completar el diseño de la página.
Entendiendo el flotador
选择器{
float:属性值;
}
El valor de la propiedad:
- ninguno
- izquierda (izquierda flotando)
- derecha (flotar a la derecha)
Características flotantes
1) Separarse de la secuencia estándar y no ocupar ninguna posición (la posición original se filtra a la siguiente secuencia estándar)
2) Los elementos flotantes se muestran en una fila. Si el padre no puede ajustarlos, un Se mostrará una nueva fila de forma predeterminada. No hay espacio entre los elementos flotantes de forma predeterminada.
3) Cualquier elemento puede flotar, no importa si es un elemento de bloque o un elemento en línea, el ancho y la altura se pueden establecer directamente después de flotar, y el valor predeterminado es similar a la función de bloque en línea, no se requiere conversión de visualización.
La relación entre los cuadros flotantes y hermanos.
La posición de ocupación de flujo estándar flotante-no ocupa la posición (fuera del estándar)
flotante solo afectará los cuadros de flujo estándar actuales o posteriores, y no afectará al flujo estándar anterior.
La relación entre el elemento flotante y el cuadro padre.
- Los elementos flotantes no pueden suprimir el borde del padre.
- Los elementos flotantes no pueden abrumar el acolchado del padre
- El posicionamiento que aprenda más tarde se puede presionar arbitrariamente
Aplicación simple flotante
(1) Permita que varios elementos a nivel de bloque se organicen horizontalmente en una fila (aquí, los elementos en línea se convierten en elementos a nivel de bloque)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style type="text/css">
.myclass1{
background-color: red;
width: 100px;
height: 200px;
display:inline-block;
}
.myclass2{
background-color:black;
width: 100px;
height: 200px;
display:inline-block;
}
.myclass3{
background-color: red;
width: 100px;
height: 200px;
display:inline-block;
}
</style>
</head>
<body>
<span class="myclass1">1</span>
<span class="myclass2">2</span>
<span class="myclass3">3</span>
</body>
</html>
(2) Agregar flotador
<style type="text/css">
.myclass1{
background-color: red;
width: 100px;
height: 200px;
display:inline-block;
float: left;
}
.myclass2{
background-color:black;
width: 100px;
height: 200px;
display:inline-block;
float: left;
}
.myclass3{
background-color: red;
width: 100px;
height: 200px;
display:inline-block;
float: left;
}
</style>
(3) Uno a la izquierda, uno a la derecha
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style type="text/css">
.myclass1{
background-color: red;
width: 100px;
height: 200px;
display:inline-block;
float: left;
}
.myclass2{
background-color:black;
width: 100px;
height: 200px;
display:inline-block;
float: right;
}
</style>
</head>
<body>
<div class="myclass1"></div>
<div class="myclass2"></div>
</body>
</html>
Flotador claro
Eliminar los flotadores no es en realidad eliminar los flotadores, sino el efecto de eliminar los flotadores añadidos en el flujo estándar posterior.
Si el cuadro secundario es una corriente estándar, el padre puede detectar la altura porque la corriente estándar ocupa la posición.
La caja del niño flota y no ocupa posición, y debido a que la altura del padre es cero, el padre no puede detectar la altura.
1) Método de etiqueta adicional
Agregue una etiqueta vacía a nivel de bloque al final del último elemento flotante.
<div style="clear:both;"></div>
--- 这个空标签一定是块元素.
Desventajas: La estructura es fácil de ensuciar.
2) Agregue el desbordamiento del método de atributo de
desbordamiento: oculto para el padre del elemento flotante ;
Desventaja: cuando el contenido aumenta, el contenido se recorta y el contenido que debe desbordarse no se puede mostrar.
3) Después de que el pseudo-elemento borra el flotador
.clearfix:after {
/* 使用伪元素必须添加content属性 */
content: "";
/* 因为伪元素是行内元素，所以需要转换成块元素 */
display: block;
/* 兼容 */
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7 专有 */
*zoom: 1;
}
4) Doble pseudoelemento claro flotante
.clearfix::before,
.clearfix::after {
/* 要想使用伪元素，必须写上content属性 */
content: "";
/* 这里写成block也是没有问题的，为什么使用table,这是老的写法，兼容老版本浏览器 */
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1;
}
¿Cuándo se limpiará el flotador?
- El padre no tiene altura.
- La caja del niño vuelve a flotar.
- Porque el flotador afecta el diseño posterior.