Tabla de contenido
2. Las características de la flotación
7. Defectos flotantes y soluciones
8. Instrucciones complementarias
Prefacio:
La flotación es una parte importante de html. Anteriormente aprendimos tres tipos de elementos (elementos de nivel de bloque, elementos en línea y elementos de bloque en línea). Hoy aprenderemos sobre los elementos flotantes. A través de los elementos flotantes, podemos configurar mejor la página y operar para lograr el efecto deseado.
flotar
1. Efecto flotante
El anterior es el efecto de estilo flotante.La combinación de un lado de la imagen y un lado del texto que solemos ver en la web generalmente se realiza flotando.
2. Las características de la flotación
características
1. La mitad del flujo del documento (no ocupa espacio en la página, los gráficos y el texto se ajustan)
2. El borde flotante está determinado por el elemento padre
3. Puede establecer w, h, m, p
4. No se ha establecido la decisión de contenido w,h w,h
5. margin:0 auto (procesamiento de espacio en blanco adicional) no tendrá efecto
6. Los elementos flotantes no pueden cubrir elementos en línea
Descripción del flujo de documentos: Usualmente usamos el flujo de documentos ordinario, y el flotante está semiseparado del flujo de documentos. Su característica es que no ocupa espacio. Podemos entender que este cuadro es flotante, y hay un espacio debajo para poner cosas. .
flujo normal de documentos
De forma predeterminada, el navegador estipula las reglas de disposición de un elemento de bloque dentro del elemento principal:
de arriba hacia abajo
Ordenar desde la izquierda
Un elemento de bloque ocupa una línea.
3. Redacción flotante
El flotante se divide en flotante a la izquierda y flotante a la derecha, que son respectivamente izquierdo y derecho. El estilo de escritura es muy sencillo:
flotante izquierda flotante: izquierda;
flotante derecho flotante: derecho;
flotar en ambos lados flotar: ambos;
4. El principio de flotación
El estilo de caja antes de flotar es el siguiente:
Después de flotar, el estilo de la caja es el siguiente:
Aquí te muestro un ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
background-color: yellow;
width: 200px;
height: 200px;
/* 设置为左浮动 */
float: left;
}
.box2{
background-color: green;
height: 200px;
width: 300px;
}
.box3{
background-color:cornflowerblue;
height: 200px;
width: 400px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>El efecto es el siguiente:
El primer cuadro amarillo aquí se ha flotado, por lo que cubrirá el segundo cuadro verde a continuación, y el "ángulo de vista de observación de la página web está pasando por alto", por lo que el efecto es como se muestra arriba.
5. El papel de flotar
Flotar es permitir que un elemento se mueva hacia la izquierda o hacia la derecha hasta que su margen toque el relleno de su padre o el margen del elemento anterior. De esta forma, los elementos de bloque pueden ser adyacentes entre sí por flotación. Para decirlo sin rodeos, es mostrar diferentes casillas en una misma línea.
6. Caso
A continuación, realizaré una operación de interfaz a través de elementos flotantes.
código HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./demo.css">
</head>
<body style="background-color: bisque;">
<div class="boqi">
<div class="kun">
<img src="../image/b80011126e6d48a55f8b2eb9adca0689-2.gif" alt="显示失败">
</div>
游彩虚村
<br>
[唐] 淳禄仁
<br>
寂寥苏山荔枝肥，泥坠毫湿不晚耕。
<br>
苔痕梅幽争霞头，梅景树枝高菜生。
</div>
</body>
</html>Código CSS:
.boqi{
width: 800px;
height: 1000px;
border: 2px solid rebeccapurple;
margin: 0 auto;
background-image: url(../image/11月29日.jpg);
background-repeat: no-repeat;
font-family: 华文行楷;
font-size: 25px;
color: black;
text-align: center;
}
.kun
{
/*设置为左边浮动*/
float: left;
}Efecto:
Este es el efecto en el que utilizo las características de los elementos flotantes para rodear primero los gráficos y el texto, con imágenes por un lado y texto por el otro.
7. Defectos flotantes y soluciones
problema flotante
Cuando no se establece la altura del elemento principal, la altura se ampliará según el contenido del flujo del documento.
Y cuando el elemento secundario flota, se separa del flujo del documento, por lo que la altura del nivel principal no se estirará, lo que causará muchos problemas para nuestra estructura de diseño posterior.
Veamos un ejemplo sin establecer la altura:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li{
border: 2px solid red;
height: 100px;
width: 100px;
/* 删除掉小圆点 */
list-style: none;
/* 设置为左浮 */
float: left;
}
.box{
/* 盒子居中放置 */
margin: 0 auto;
background-color: blueviolet;
width: 300px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
Aquí hay un problema. Cuando no configuré la altura del cuadro, el elemento flotante no soportaba el cuadro, lo que provocó que el cuadro no se mostrara, que no es el efecto que queremos.
solución
Solución al colapso de altura:
Método 1: elemento secundario más claro
Agregue un elemento secundario vacío detrás del elemento flotante y asígnele la propiedad CSS clear ;
<div style="clear:both"></divBorrar valor: la izquierda borra el flotante izquierdo | la derecha borra el flotante derecho | ambos borran todos los flotantes
Método 2: ancho y alto del elemento principal
Especifique directamente el ancho y la altura del elemento principal y no habrá problemas de colapso. La desventaja es que debe calcular manualmente el ancho y la altura adecuados, y la escalabilidad no es buena.
Método 3: BFC (contexto de formato de bloque) del elemento principal
El elemento principal debe cumplir una de las siguientes condiciones:
elemento raíz
El atributo flotante no es ninguno.
la posición no es estática y relativa
el desbordamiento no es visible ( más comúnmente utilizado, generalmente se establece desbordamiento: oculto para resolver el colapso de altura )
pantalla 为 bloque en línea / celda de tabla / título de tabla / flex / flex en línea
Método 4: el elemento padre usa la pseudoclase después
La forma más convencional actual es usar pseudoelementos, lo que equivale a agregar un elemento secundario adicional al principal. Al mismo tiempo, podemos compartir el estilo y agregar el mismo nombre de clase claro a todos los elementos principales que necesitan ser despejado
Entonces solo necesitamos agregar la siguiente pieza de código en el estilo o código CSS.
/* 浮动的解决方式 */
ul::after{
display: block;
content: '';
/* 设置为两边都进行清除 */
clear: both;
}El efecto después de resolver:
8. Instrucciones complementarias
Nota: Una vez que el elemento flota, ya no se admite
margin:auto, solo se admite el valor exacto del margen.Los elementos flotantes dejan de moverse cuando se encuentran con un elemento principal.
El elemento anterior del elemento flotante es un elemento en el flujo de documentos normal y el elemento no se mueve en relación con las posiciones horizontal y vertical.
Se recomienda usar float para diseño horizontal en lugar de bloque en línea
La alineación de línea de base del diseño de bloque de línea es más problemática, por lo que no tiene que preocuparse por este problema con la flotación;
Los espacios en blanco del diseño del bloque de líneas se analizarán y se mostrarán en la página, no se preocupe por la flotación.
list-style:none;Borre la viñeta predeterminada para ul u ol.
min-widthmax-width
Bueno, lo anterior es todo el contenido de hoy, ¡nos vemos en el próximo número!
Comparte un fondo de pantalla: 