Prefacio
La propiedad flotante es una propiedad muy importante en el estilo CSS. La barra de navegación y las barras de navegación izquierda y derecha de la página web se completan con la propiedad flotante. La propiedad flotante no solo permite que el texto tenga un efecto de envoltura, al mismo tiempo, su característica flotante también juega un papel vital en algunos diseños.
1. ¿Qué es flotar?
¿Qué es flotar?
En un diseño div normal, cada elemento del bloque div ocupa una línea completa, por lo que el siguiente elemento div aparecerá en la siguiente línea del elemento div anterior, y todo el diseño se organiza en orden de arriba a abajo.
Flotar rompe este arreglo. El atributo flotante hará que los elementos que deben organizarse de arriba a abajo floten a un nivel más alto, flotando hacia la izquierda o hacia la derecha como un globo.
En segundo lugar, el uso de atributos flotantes
1. Cómo utilizar
Agregue el atributo flotante al estilo, donde el valor se deja para flotar a la izquierda, el valor es derecho para flotar a la derecha, el valor es ninguno para no flotar y ninguno es el valor predeterminado.
Yo soy box1
Yo soy box2
Yo soy box3
2. Características
① El elemento de bloque se convierte en elemento en línea
En la figura, box1 y box3 flotan a la izquierda y box2 flotan a la derecha. Aunque box3 se muestra después de box2, la posición de box3 está obviamente en la misma fila que box2 y la dirección de flotación no se ve afectada por el orden. El elemento del bloque div está en su propia línea y las características del atributo flotante lo convierten en un elemento en línea.
③ Hacer que los elementos en línea tengan ancho y alto
Estos son tres elementos en línea.Cuando se definen el ancho y el alto, el ancho y el alto están determinados por el contenido, no por la definición de ancho y alto.
.box1 {
pantalla: en línea;
ancho: 100px;
altura: 100px;
color de fondo: #bdf;
/* flotador izquierdo; * /
}
.box2 {
pantalla: en línea;
ancho: 90px;
altura: 90px;
color de fondo: naranja;
/* flotador izquierdo; * /
}
.box3 {
pantalla: en línea;
ancho: 80px;
altura: 80px;
color de fondo: verde;
/* flotador izquierdo; * /
Después de agregar el estilo flotante, sigue siendo un elemento en línea y tiene un ancho y un alto. (El contenido aún admite el atributo flotante cuando no se establecen el ancho y el alto)
③ Sal del flujo de documentos
Este es un elemento padre y un elemento hijo. El elemento padre no tiene un ajuste de altura y es compatible con el elemento hijo.
Después de agregar el atributo flotante al elemento secundario.
Se puede encontrar claramente que el elemento secundario ha saltado del rango del elemento principal y no es compatible con el elemento principal. El atributo flotante hará que el elemento abandone el flujo del documento, provocando que la altura del elemento principal se contraiga.
En tercer lugar, la solución de alto colapso-BFC
La separación del elemento secundario del flujo de documentos del elemento principal hará que el elemento principal se contraiga en altura, lo que tiene un impacto muy grave en el diseño de la página. Y BFC (contexto de formato de bloque) resuelve eficazmente el problema del alto colapso.
Una vez que el elemento enciende BFC, tendrá las siguientes características:
El margen vertical del elemento principal no se superpondrá con el elemento secundario
Los elementos con BFC habilitado no estarán cubiertos por elementos flotantes
El elemento que enciende BFC puede contener subelementos flotantes
1. Active el modo BFC
① Establecer atributos flotantes para elementos (no recomendado)
.outer {
borde: naranja sólido 10px;
flotador izquierdo;
/ * El atributo flotante se establece aquí * /
}
.interno {
ancho: 90px;
altura: 90px;
color de fondo: #bdf;
flotador izquierdo;
Desventajas: El elemento flotante recién agregado causará nuevos problemas de flotación. Y el hecho de que el elemento del bloque div del elemento padre esté en su propia línea desaparece, lo que puede hacer que el elemento detrás del elemento padre se mueva hacia arriba, lo que fundamentalmente no puede resolver el problema.
② Establezca el ancho y alto del elemento principal (no recomendado)
.outer {
ancho: 100px;
altura: 100px;
/ * Establecer altura fija 100px, ancho 100px * /
borde: naranja sólido 10px;
}
.interno {
ancho: 90px;
altura: 90px;
color de fondo: #bdf;
flotador izquierdo;
Desventajas: una vez que el elemento padre tiene un ancho y un alto fijos, pierde su función altamente adaptable y no es lo suficientemente flexible.
③ Agregue un div vacío después del elemento secundario
Ventajas: el desbordamiento del contenedor no se recortará y es compatible con todos los navegadores.
Desventajas: hay un div vacío, lo que aumenta la redundancia del código.
④ El desbordamiento del elemento se establece en valores ocultos u otros valores no visibles
.outer {
desbordamiento: oculto;
/ * Recorte de desbordamiento, IE6 y versiones inferiores usan auto * /
borde: naranja sólido 10px;
}
.interno {
ancho: 90px;
altura: 90px;
color de fondo: #bdf;
flotador izquierdo;
}
Ventajas: simple.
Desventajas: No se puede utilizar junto con el posicionamiento de posición, el tamaño sobrante se recortará.
⑤ La visualización del elemento está configurada en bloque en línea (no recomendado)
.outer {
pantalla: bloque en línea;
borde: naranja sólido 10px;
}
.interno {
ancho: 90px;
altura: 90px;
color de fondo: #bdf;
flotador izquierdo;
}
Desventajas: El elemento del bloque div del elemento principal desaparece, lo que puede hacer que el elemento posterior al elemento principal se mueva hacia arriba, lo que no puede resolver el problema fundamentalmente.
⑥ Agregue un pseudo elemento después del elemento principal (recomendado)
Hospital de mujeres de Dalian http://xmobile.bhbyby.com/
.outer {
pantalla: bloque en línea;
borde: naranja sólido 10px;
}
.outer: después de {
contenido: "";
altura: 0;
desbordamiento: oculto;
/ * Compatible con el navegador IE * /
Limpia los dos;
/ * Elimina la influencia flotante izquierda y derecha * /
bloqueo de pantalla;
/ * Este es un elemento en línea, que se transforma en un elemento de bloque para soportar el elemento padre * /
visibilidad: oculta;
}
.interno {
ancho: 90px;
altura: 90px;
color de fondo: #bdf;
flotador izquierdo;
}
Ventajas: simple y sin redundancia de código.
⑦ La posición del elemento se establece en absoluta
.outer {
posición: absoluta;
/ * O fijo * /
borde: naranja sólido 10px;
}
.interno {
ancho: 90px;
altura: 90px;
color de fondo: #bdf;
flotador izquierdo;
}
Desventajas: El elemento del bloque div del elemento principal desaparece, lo que puede hacer que el elemento posterior al elemento principal se mueva hacia arriba, lo que no puede resolver el problema fundamentalmente. Y el elemento padre de este elemento padre puede verse afectado por su posicionamiento absoluto.