El BFC y el catálogo completo de lo que lo crea

Durante quince años, la forma de arreglar un layout roto fue añadir overflow: hidden a un contenedor y rezar. Funcionaba, y nadie sabía muy bien por qué. Funcionaba porque overflow distinto de visible es uno de los ocho o nueve disparadores de un contexto de formato de bloque, y ese era el efecto que buscabas; el recorte del contenido era el peaje que pagabas sin saberlo. Conocer el catálogo completo te deja elegir el disparador cuyo peaje puedes permitirte.

El catálogo

Una caja establece un contexto de formato de bloque para sus descendientes cuando se cumple cualquiera de estas condiciones. La lista viene de CSS Display 3 y de CSS Overflow 3, y es cerrada: si tu caja no está aquí, no abre un BFC.

Léela como lo que es: una lista de efectos que alguien quería, cada uno con un aislamiento como consecuencia colateral. Ninguno de los diez primeros se diseñó para crear un BFC. Se diseñaron para flotar, para recortar, para columnar. El BFC venía de regalo porque la especificación no tenía otra forma coherente de definir el resultado.

flowchart TB
T[Que abre un contexto de formato de bloque] --> A[Elemento raiz]
T --> B[float distinto de none]
T --> C[position absolute o fixed]
T --> D[display inline-block]
T --> E[overflow distinto de visible y de clip]
T --> F[display flow-root]
T --> G[Contenedor flex o grid]
T --> H[Celda o caption de tabla]
T --> I[Contenedor multicolumna]
T --> J[contain layout paint o content]
B --> BX[Sale del flujo]
C --> CX[Sale del flujo]
D --> DX[Participa en linea]
E --> EX[Recorta o hace scroll]
F --> FX[Sin efecto secundario]
G --> GX[Sus hijos dejan de ser bloques]
I --> IX[Reparte el contenido en columnas]
J --> JX[Aisla tambien pintado o tamano]
style T fill:#cba6f7,color:#11111b
style F fill:#a6e3a1,color:#11111b
style FX fill:#a6e3a1,color:#11111b
style BX fill:#f9e2af,color:#11111b
style CX fill:#f9e2af,color:#11111b
style DX fill:#f9e2af,color:#11111b
style EX fill:#f9e2af,color:#11111b
style GX fill:#f9e2af,color:#11111b
style IX fill:#f9e2af,color:#11111b
style JX fill:#f9e2af,color:#11111b

flow-root: el disparador sin factura

display: flow-root se añadió a CSS Display 3 precisamente porque la comunidad llevaba una década usando efectos secundarios como si fueran API. El nombre es literal: la caja se convierte en la raíz de un flujo nuevo. Nada más. Sigue siendo un bloque, sigue ocupando el ancho disponible, sigue permitiendo que su contenido desborde visiblemente, y sus hijos siguen siendo cajas de bloque en flujo normal.

/* El clearfix de 2010, con toda su deuda */
.contenedor::after { content: ""; display: table; clear: both; }

/* El clearfix de 2015, que además recorta lo que no querías recortar */
.contenedor { overflow: hidden; }

/* Lo mismo, sin peaje */
.contenedor { display: flow-root; }

Está disponible en todos los motores desde 2018 y no tiene ninguna trampa conocida. Si lo único que necesitas es aislamiento, es la respuesta correcta y no hay debate.

Flex y grid no crean un BFC, pero se comportan como si lo hicieran

Aquí hay un matiz que la mayoría de los artículos se salta. Un contenedor flex no establece un contexto de formato de bloque: establece un contexto de formato flex. Un contenedor grid establece un contexto de formato grid. Sus hijos no se maquetan con el algoritmo de bloque, sino con el de flex o el de grid, así que llamarlos BFC sería falso.

Lo que sí ocurre es que la especificación define ambos como contextos de formato independientes, y les asigna las mismas garantías hacia fuera que a un BFC: los flotantes no entran, los márgenes no colapsan con el contenido, y la caja se dimensiona alrededor de todo lo suyo. Por eso el overflow: hidden que ponías en el contenedor para “arreglar” un layout deja de hacer falta en cuanto ese contenedor pasa a ser flex.

/* Las tres tienen el mismo aislamiento frente al exterior */
.a { display: flow-root; }   /* BFC */
.b { display: flex; }        /* contexto flex, independiente */
.c { display: grid; }        /* contexto grid, independiente */

Además, cada elemento flex y cada elemento grid establece a su vez un contexto de formato independiente para su propio contenido. Es decir: en cuanto usas flex o grid, cortas la cadena de colapsos de márgenes en dos sitios a la vez, en el contenedor y en cada hijo. Ese es el motivo real de que los layouts modernos parezcan menos frágiles que los de 2012: no es que flex sea más listo, es que aísla mucho más.

Elegir con criterio

La pregunta que hay que hacerse no es “cómo creo un BFC” sino “qué tiene que seguir pudiendo hacer este contenedor”.

Si el contenedor debe seguir mostrando contenido que desborde, como un tooltip absoluto que sobresale del borde, overflow: hidden está descartado y flow-root es la única opción limpia. Si el contenedor debe hacer scroll, overflow: auto mata dos pájaros. Si ya es flex o grid por razones de layout, no añadas nada: ya tienes el aislamiento. Si necesitas además aislar el coste de recálculo del layout, contain: layout te da el BFC y le promete al motor que nada de dentro afecta a nada de fuera.

/* Tarjeta con una insignia que sobresale por la esquina.
   overflow: hidden la decapitaría; flow-root no. */
.tarjeta {
  display: flow-root;
  position: relative;
  padding: 1rem;
}
.tarjeta .insignia {
  position: absolute;
  inset-block-start: -0.5rem;
  inset-inline-end: -0.5rem;
}