Nuevas cajas flotantes “clearing” de BFC

Como muestra el ejemplo, al aplicar display: inline-block; al bloque contenedor parece “limpiar” la caja flotante dentro.

 .wrapper-inline-block { display: inline-block; } .left-column { background-color: teal; float: left; } 
 

Float

Non-float


Float

Non-float

No tengo idea de cómo sucede esto. Todo lo que sé es esa display: inline-block; crea un nuevo contexto de formato de bloque.

Mi pregunta es: ¿cómo se integran las nuevas cajas flotantes “claras” de BFC?


Siguiente pregunta:

Curiosamente, cuando cambio

Non-float

a Non-float , el efecto de “limpieza” desaparece. Sería bueno si alguien puede explicar la razón detrás de mí.

 .wrapper-inline-block { display: inline-block; } .left-column { background-color: teal; float: left; } 
 

Float

Non-float

Float

Non-float

Esto se debe a que los bloques en línea con el width: auto predeterminado width: auto se dimensionan de acuerdo con el algoritmo de reducción de ajuste . CSS2.1 no define completamente cómo ese algoritmo debe manejar contenidos flotantes, pero parece que los navegadores hacen esto:

  1. El bloque en línea se clasifica ignorando flotadores
  2. Los recuadros de línea dentro del bloque en línea son tan anchos como el bloque en línea
  3. El flotador reduce los cuadros de línea
  4. Por lo tanto, los contenidos no flotantes ya no caben en el espacio contraído, por lo que el ajuste a la siguiente línea.

Tenga en cuenta que no hay compensación, si hace que el bloque en línea sea lo suficientemente ancho, el texto aparecerá junto al flotador.

 .wrapper.inline-block { display: inline-block; } .w400 { width: 400px; } .wrapper { border: 1px solid; } .left-column { background-color: teal; float: left; } 
 

Shrink-to-fit inline-block:

Float

Non-float

Explicit width inline-block:

Float

Non-float

Fill-available block:

Float

Non-float