Apuntes

• BFC (Block Formatting Context) ⇒ Es un mini layout dentro de tu layout
  • En español significa "Formato de contexto de Bloque"
  • Se comporta de manera independiente a cómo se comporta el resto de la página
  • Si bien maneja la estructura interna de un elemento, utilizando position se puede sacar al elemento del flujo normal del documento, haciendo que este se reordene de una forma distinta

• Tenemos un elemento flotante en el ejemplo anterior, en el cual las letras rodean al mismo, pero que pasaría si quitamos ese texto de alrededor

• El layout interno se rompe una vez quitado el mismo

• Si analizamos el elemento, lo que está pasando es que reducimos el contenedor, pero en el exterior se está creando un margen, pero tiene solución

• Si usamos overflow: auto; se arregla

¿Por qué funciona?

• Porque la propiedad overflow crea un BFC si su valor es diferente al inicial (visible)
• Una característica de BFC es que contiene flotantes

¿Qué más crea un BFC?

• Utilizar position: absolute o position: fixed
• El uso de
  • display: inline-block
  • display: table-cell
  • display: table-caption

Flexbox y Grid

• Ambos formatos nacieron con la intensión de facilitar el diseño de la página

<aside> 💡 Flexbox y CSS Grid también crean algo así como un BFC, excepto que se describen como:

</aside>