El misterio de que el flotador no cambie el tamaño de la división

Cuando se usa CSS flotante, se supone que los elementos posteriores se alinearán a la izquierda en lugar de fluir hacia un nuevo línea. Sin embargo, en algunos escenarios, como el ejemplo proporcionado, el siguiente div continúa abarcando todo el ancho en lugar de comenzar a la derecha del primer div.

Para comprender este comportamiento, profundizaremos en las complejidades de float posicionamiento. Cuando un elemento flota (en este caso, el .inline div), el contenido debajo de él se alinea con el lado derecho de ese elemento. Sin embargo, el ancho del bloque contenedor establecido por el elemento posterior (el div .amarillo) aún se conserva.

Este comportamiento se describe en la especificación CSS: los cuadros de bloque no colocados fluyen verticalmente como si el flotante no lo hiciera. existir. Sin embargo, los cuadros de línea al lado del flotante se acortan para acomodar el cuadro de margen del flotante.

Por lo tanto, si un elemento a nivel de bloque (como .div amarillo) tiene un fondo, se extenderá a través del elemento flotante.

La resolución

De acuerdo con el nivel CSS 2.1, los elementos con ciertas propiedades (reemplazos a nivel de bloque, elementos que establecen un nuevo contexto de formato de bloque) no deben superponerse al cuadro de margen de cualquier flota en el mismo contexto. Agregar una propiedad de "desbordamiento" que no sea "visible" al div .amarillo evita que se superponga al elemento flotante.

Cuándo puede ser útil la superposición

Es importante tenga en cuenta que la superposición puede ser beneficiosa en situaciones en las que el contenido después del elemento flotante es lo suficientemente largo como para continuar normalmente. Restringir el contenido de forma predeterminada podría provocar que no fluya bajo el elemento flotante.