Concepto flotante
Los elementos a nivel de bloque no pueden mostrar varios elementos en la misma línea en el flujo del documento, y aparecerán espacios entre los elementos después de convertirlos en elementos en línea o elementos de bloque en línea. Para lograr el efecto de diseño, se usa float (float). El cuadro flotante puede moverse hacia la izquierda o hacia la derecha hasta que su borde toque el borde del cuadro principal o el borde de otro elemento flotante. La flotación hace que el elemento abandone el flujo de documentos (flujo estándar), es decir, ya no ocupa una posición en el flujo de documentos.
- Como se muestra en la figura, cuando el cuadro 1 flota hacia la derecha, deja el flujo de documentos y se mueve hacia la derecha hasta que su borde derecho toca el borde derecho del cuadro contenedor.
- Como se muestra en la figura, cuando el cuadro 1 flota hacia la izquierda, se sale del flujo de documentos y se mueve hacia la izquierda hasta que su borde izquierdo toca el borde izquierdo del cuadro contenedor. Debido a que ya no está en el flujo de documentos, no ocupa espacio y en realidad cubre el Cuadro 2, lo que hace que el Cuadro 2 desaparezca de la vista.
- Como se muestra en la figura, si el marco contenedor es demasiado estrecho para acomodar los tres elementos flotantes dispuestos horizontalmente, los otros bloques flotantes se mueven hacia abajo hasta que haya suficiente espacio. Si la altura de los elementos flotantes no es suficiente, pueden ser "atascados" por otros elementos cuando se mueven hacia abajo.
- Cuando un elemento está flotando, se mueve hacia arriba y hacia abajo hasta que el borde superior toca el borde inferior del elemento anterior (elemento flotante o elemento de flujo estándar), o se alinea con el borde superior del elemento flotante anterior; se mueve hacia la izquierda y hacia la derecha hasta que toque el borde de otros elementos o contenga elementos al borde. como muestra la imagen.
Características flotantes
- Los elementos flotantes saldrán del flujo de documentos (fuera de la etiqueta) .
- Los elementos flotantes se mostrarán en una fila y se alinearán en la parte superior .
- Los elementos flotantes tendrán las características de los elementos en línea .
- Los elementos flotantes solo afectarán al siguiente flujo estándar y no afectarán al flujo estándar anterior .
- Cualquier elemento en el modo de visualización se puede configurar para que flote .
- Un elemento se establece con un atributo flotante, teóricamente el resto de los elementos hermanos también deberían ser flotantes (para evitar problemas de diseño que afecten a los elementos hermanos) .
Los problemas que ocurren a menudo cuando los elementos hermanos no están configurados para flotar al mismo tiempo son:
- Los elementos de la parte trasera están cubiertos por los elementos flotantes del frente.
- Los siguientes elementos flotantes no se pueden mostrar en la misma línea porque los elementos hermanos anteriores no son flotantes.
Flotador claro
Problema de alto colapso
Dado que el elemento principal no proporciona directamente la altura en muchos casos (la altura se estira por el contenido), los elementos secundarios del interior ya no ocuparán espacio después de dejar el flujo del documento. La altura del contenido del elemento principal cambia (contraído), lo que afecta la posición del cuadro de flujo del documento debajo del elemento principal .
Resuelve el problema del alto colapso
Para resolver el problema del colapso de la altura, la esencia de la limpieza de flotadores es eliminar la influencia de los elementos flotantes en la altura del elemento principal. Si el cuadro del elemento principal tiene una altura, no es necesario borrar el flotador. El método consiste en agregar el atributo clear a los elementos secundarios en el elemento principal .
selector {
clear:left;
}
/*清除该元素左边浮动元素对父元素的高度的影响*/
/*可以设定的值还有right、both*/
La estrategia habitual para solucionar el problema del colapso alto es cerrar el flotador, es decir, el efecto del flotador se limita al interior del elemento padre.
- Agregue una etiqueta de nivel de bloque vacía debajo del elemento flotante y agregue un estilo flotante claro
<div style="clear:both">
</ div>
<!--但是添加了无意义的标签，结构性较差。-->
- Agregue el atributo overflow: hidden \ auto \ scroll al elemento padre. El código es conciso pero habrá un problema de que la parte de overflow no se puede mostrar.
- Agregue el pseudoelemento after al elemento principal.
.clearfix:after {
content:"";
display:block;
clear:both;
height:0;
visibility:hidden;
}
.clearfix {
/*ie6、ie7专用*/
*zoom:1;
}
- Agregue pseudoelementos dobles al elemento principal.
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
/*ie6、ie7专用*/
*zoom:1;
}
Nota: Borrar el flotador resuelve el efecto del colapso de la altura del elemento principal en los elementos debajo de él, no el efecto del elemento flotante dentro del elemento secundario (el elemento ubicado detrás del elemento flotante) dentro del elemento principal. Por lo general, debe prestar atención a la diferencia entre estos dos efectos.
Polvo / 2020/12/20