Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes: $349
$259
Currency
Antes: $349
Ahorras: $90
COMIENZA AHORA
Termina en: 9D : 3H : 20M : 18S

Debes iniciar sesión

Para ver esta clase crea una cuenta sin costo o inicia sesión

Contextos de formato: Formato de Contexto de Bloque (BFC)

4/28

esta muy bien la información pero seria mejor si los ejemplos se hacen deferente en código con el VScode

Horrible. A ver si se esmeran y ponen algun curso de lo mismo pero con ejemplos practicos. No me suma nada alguien hablando 200 palabras por minutos y no me muestra nada de lo q esta diciendo. Esta chica piensa q tengo un chrome insertado en mi cabeza.

Apuntes de la clase:

Block formatting context (BFC)

Es el layout interno de un elemento, que se comporta de manera independiente a como 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

¿Que pasa con flexbox y grid?

Ambos formatos nacieron con la intensión de facilitar el diseño de la página. Mientras flexbox se basa en un formato donde se le da flexibilidad a los elementos y al contenedor, grid adquiere un formato de cuadricula** realmente facil de ordenar**

¿E Inline-block?

Inline-block es bastante facil de entender. Consta en una fusión de ambas partes, donde al igual que inline-flex e inline-block, externamente el elemento se situa de forma inline, pero por dentro puede adoptar propiedades block como width, left, etc…

Sobre flow-root
Personalmente no entendí cual es la funcionalidad de flow-root. Tuve que buscar en documentación y aun así no me quedó del todo clado su uso, pero entre sus caracteristicas resetea el flujo del documento, permitiendo posicionar correctamente los elementos float (que, al ser float, se descolocan del flujo, y al resetearlo lo vuelve a ubicar) esto es genial para casos donde tenes que usar elementos flotantes y no queres que se te desordene toda la caja

Aquí dejo más documentacion al respecto
https://www.programandoamedianoche.com/2018/05/conoce-flow-root-la-solucion-al-desborde-de-un-elemento-con-float/
https://www.campusmvp.es/recursos/post/display-flow-root-para-limpiar-floats-css.aspx

Si no sabes que es “Posicionamiento flotante” puede ser que te impida entender bien la clase, yo necesité leerlo para entender.
Aquí puedes revisar el concepto:
https://uniwebsidad.com/libros/css/capitulo-5/posicionamiento-flotante

Ahora todo tiene sentido, siempre que aprendía sobre CSS decían: “Coloca el float: left; pero también ponle un overflow para que se arregle”, pero nadie decía por qué se arreglaba, ahora comprendo mejor el concepto.
.
Básicamente es como crear pequeños layouts dentro del mismo elemento por lo que entiendo, y en el caso del inline-block, se crean ambos layouts, lo que nos permite trabajar con las propiedades de ambas 🤔

Vengo del curso de CSS Grid Layout, y este tiene el mismo problema que el otro: diapositivas, tal vez sea la forma en que ella enseña mejor. Pero se siente como una presentación de Slideshare o Prezi. La verdad no me está gustando este curso, espero que haya un poco más de práctica a lo largo del curso. 😥

🍞 Contextos de formato: Formato de Contexto de Bloque (BFC)

<h4>Apuntes</h4>
  • 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
1.png
  • 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
2.png
  • El layout interno se rompe una vez quitado el mismo
3.png
  • 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
4.png
  • 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
<h4>¿Qué más crea un BFC?</h4>
  • Utilizar position: absolute o position: fixed
  • El uso de
    • display: inline-block
    • display: table-cell
    • display: table-caption

<h4>Flexbox y Grid</h4>
  • Ambos formatos nacieron con la intensión de facilitar el diseño de la página

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

<h4>Flexbox</h4>
  • Contexto de formato flexible ⇒ El elemento está participando en un diseño flexible
  • Se basa en un formato donde se le da flexibilidad a los elementos y al contenedor
<h4>CSS Grid</h4>
  • Contexto de formato de cuadricula ⇒ El elemento está participando en un diseño de cuadricula
  • Adquiere un formato de cuadricula realmente fácil de ordenar

  • display: inline-block crea un BFC y su hermano display: flow-root
    • display: inline-block ⇒ Da un BFC en una caja en línea
      • Consta en una fusión de ambas partes, donde al igual que inline-flex e inline-block, externamente el elemento se sitúa de forma inline, pero por dentro puede adoptar propiedades block como width, left, etc…
    • display: flow-root ⇒ Da un BFC en una caja de bloque
      • Permite posicionar correctamente los elementos float (que, al ser float, se descolocan del flujo, y al resetearlo lo vuelve a ubicar) esto es genial para casos donde tienes que usar elementos flotantes y no quieres que se te desordene toda la caja
  • Todo lo trabajamos bajo los conceptos de block e inline y se explica el diseño de CSS bajo estos dos conceptos
5.png
  • Podemos controlar el tipo de cuadro que se genera utilizando la propiedad display

RESUMEN: BFC (Block Formatting Context) es un pequeño layout el cual esta aparte de todo el documento. Este mismo se puede generar a partir de la propiedad position, pero cada una tiene su característica de manejar el contexto de formato. Diferentes elementos tienen su contexto de bloque

Acá le dejo el código del ejemplo del video para que puedan experimentar con las propiedades.
HTML.

 <div class="outer">
        <div class="float"> I am a floated element.</div>
        I am text inside the outer box

    </div>

CSS.

.outer {
    border: 5px dotted rgb(214, 129, 137);
    border-radius: 5px;
    width: 450px;
    padding: 10px;
    margin-bottom: 40px;
    overflow: auto;
}

.float {
    padding: 10px;
    border: 5px solid rgba(214, 129, 137, .4);
    border-radius: 5px;
    background-color: papayawhip;
    float: left;
    width: 200px;
    margin: 0 20px 0 0;
    
}
reto.PNG

Oooh 😮 Que interesante!! Los he utilizado, pero no sabia lo que había detrás de todo esto.

por favor platzi actualizen el curso ¡¡¡¡¡ porfavor recomiendo mas practica que teoria

como alguien que maqueta hace años, les digo que la mayoría de esta información es totalmente innecesaria, en más de 10 años jamás supe ni que existía el termino BFC. Maquetar es 99% práctica, este curso es 99% teoría…

Les recomiendo leer este post:
https://www.paradigmadigital.com/dev/css-display-dos-caras-de-misma-moneda/ me ayudo mucho a entender el tema de los display complementa muy bien lo de la clase sobre todo por los Outer/Inner values que no se mencionan

BFC.png

Como crítica constructiva en el min 4:08, deberían revisar bien los colores que usan para las diapos de las clases. No se ve bien el color “turquesa”, cansa la vista.

Luego todo bien.

Por defecto, los elementos se presentan como block o inline, depende de que elemento hablemos, pero cuando colocamos display:grid/flex, le estamos dando un valor de BOXGRID o FLEXBOX, por eso, si nosotros queremos un comportamiento inline dentro del grid o flex debemos colocar INLINE-FLEX o INLINE-GRID.
Pero tambien hay una mezcla de ambos de los estilos por defecto, INLINE-BLOCK. Para entender esto, debemos conocer el BFC (Block Formatting Context), esto es como una interfaz dentro de nuestra interfaz y asi poder tener estructuras dentro de la estructura general, por ejemplo, si nosotros colocamos un texto corto y queremos agregarle una imagen mas alta que el texto con un float: left; y a esto le agregamos un border, el border tendra menos height que la imagen, esto se puede arreglar con un overflow: auto;
¿y por qué esto funciona? Porque el overflow crea un BFC si su valor es diferentea “visible”. Otras propiedades que crean un BFC son el position: absolute/fixed; y el uso de display: inline-block/table-cell/table-caption;
VALE ACLARAR que normalmente en nuestros layouts utilizamos bloques en linea
Cuando hablamos de display: inline-block; este nos generara un BFC en una caja EN LINEA. A diferencia de su hermano, display:flow-root; que nos generara un BFC en una caja de bloque
Para FlexBox, en vez de crar un BFC, se crea un “contexto de formato flexible” que quiere decir que es parte de un flexible, y para Grid un “contexto de formato de cuadricula” que significa que forma parte de una cuadricula.

Block Formatin Context => Es un mini layout dentro de tu layout.

  • Display: inline-block; => Da un BFC en una caja en línea.
  • Display: flow-root; => Da un VFC en una caja de bloque.

Es un mini layout dentro de nuestro layout.

En ocaciones cuando tenemos elementos flotntes dentro de contenedores, estos se achican y el elemento flotante queda ahi sobrando o desvordandose. Para poder arreglar esto podemos un overflow:auto. Esto funciona porque la propiedad overflow crea un BFC si su valor es diferente al inicial. Y una de las caracteristicas de BFC es que contiene flotantes.

Un BFC tambien nos permite utilizar un position: absolute o fixed.

El uso de display:inline-block display:table-cell o display:table-caption.

Flexbox y CSS Grid crean algo asi como un BFC, excepto que se describe de la siguiente manera:

Flexbox: Contexto de Formato Flexible

Grid: Contexto de formato de cuadricula.

Display:Inline-block crea un BFC pero tiene un hermano menor que es Display:Flow-root que nos crea una caja de bloque.

Podemos controlarel tipo de cuadrado que se genera utilizando la propiedad display.

Hasta el momento 6/10

Algunos elementos inline, block y inline-block

Resumiendo para crear un BFC y salvar el error hay dos alternativas, la primera sin usar flex o grid y la segunda usando flex o grid
Sin flex o grid
En este caso en la clase padre defino alguna de las siguientes reglas

display: inline-block;
overflow: auto;
position: absolute;
position: fixed;

Y en la clase hijo mantengo la propiedad
float: left;

Con flexbox
Es mas intuitivo ya que no necesito en la clase hijo la propiedad
float: left;
La elimino y agrego en la clase padre la propiedad
display:flex
y con esto soluciono el problema

Si valiosa información quieres obtener, nunca parar de aprender entonces debes
"Yoda version "

Formato de Contexto de Bloque (BFC).
Es un layout pequeño, dentro de nuestro layout principal. Es como tener pequeñas estructuras dentro de nuestra estructura general.
Cuando uno de los elementos pequeños sobre pasa los límites del elemento principal, se produce un overflow, que podemos arreglar con la propiedad overflow: auto;.

overflow: auto;: Crea un BFC si su valor es diferente al inicial (visible).

BFC (block formatting context).

  • Tiene como característica contener flotantes.
  • Puedes utilizar position: absolute | fixed.
  • Puedes usar display: inline-block | table-cell | table-caption.

El similar de BFC.
Flexbox: Contexto de Formato Flexible, significa que el elemento está participando en un diseño flexible.
CSS Grid: Contexto de Formato de Cuadrícula, significa que el elemento está participando en una cuadrícula.

display: inline.block; Da un BFC en una caja en línea.
display: flow-root; Da un BFC en una caja de bloque.

Notas de la clase
Captura de pantalla 2021-04-28 032208.pngCaptura de pantalla 2021-04-28 032228.pngCaptura de pantalla 2021-04-28 032242.png

Excelente aporte

photo_2021-04-15_14-14-08.jpg

Y yo creyendo que ya sabia mucho de CSS 🤔

Entender lo que hacemos vuelve el trabajo algo más efectivo y racional, al menos en mi caso siempre que escribía líneas y líneas a veces definía un width, un margin o cualquier propiedad inherente a un elemento en _bloque _y simplemente no funcionaba, como resultado me frustraba o pasaba horas intentando averiguar el error. Tener bases teóricas ayuda realmente en la solución de muchos errores

Todas las etiquetas del lenguaje HTML se pueden clasificar en etiquetas de línea o de bloque.

Una etiqueta de línea es aquella que ocupa el espacio mínimo necesario en horizontal, y permite que otro elemento se coloque a su lado. En cambio una etiqueta de bloque, ocupa todo el ancho disponible y no permite que otro elemento se coloque a su lado (aunque aparentemente tenga lugar suficiente).

Etiquetas de línea (las más usadas):
<a>, <span>, <strong>, <img>, <input>, <code>

Etiquetas de bloque (las más usadas):
<h1>, <h2>, <h3>, <p>, <ul>, <li>, <div>, <header>, <nav>, <section>, <article>, <footer>, <form>, <table>

Me encanto este dato! Muchas gracias!

Un contexto de formato de bloque es parte del renderizado CSS visual de una página web. Es la región en que ocurre la disposición de las cajas de bloque y en la cuál los elementos flotantes interactúan los unos con los otros.

esta muy bien la información pero seria mejor si los ejemplos se hacen deferente en código con el VScode

Horrible. A ver si se esmeran y ponen algun curso de lo mismo pero con ejemplos practicos. No me suma nada alguien hablando 200 palabras por minutos y no me muestra nada de lo q esta diciendo. Esta chica piensa q tengo un chrome insertado en mi cabeza.

Apuntes de la clase:

Block formatting context (BFC)

Es el layout interno de un elemento, que se comporta de manera independiente a como 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

¿Que pasa con flexbox y grid?

Ambos formatos nacieron con la intensión de facilitar el diseño de la página. Mientras flexbox se basa en un formato donde se le da flexibilidad a los elementos y al contenedor, grid adquiere un formato de cuadricula** realmente facil de ordenar**

¿E Inline-block?

Inline-block es bastante facil de entender. Consta en una fusión de ambas partes, donde al igual que inline-flex e inline-block, externamente el elemento se situa de forma inline, pero por dentro puede adoptar propiedades block como width, left, etc…

Sobre flow-root
Personalmente no entendí cual es la funcionalidad de flow-root. Tuve que buscar en documentación y aun así no me quedó del todo clado su uso, pero entre sus caracteristicas resetea el flujo del documento, permitiendo posicionar correctamente los elementos float (que, al ser float, se descolocan del flujo, y al resetearlo lo vuelve a ubicar) esto es genial para casos donde tenes que usar elementos flotantes y no queres que se te desordene toda la caja

Aquí dejo más documentacion al respecto
https://www.programandoamedianoche.com/2018/05/conoce-flow-root-la-solucion-al-desborde-de-un-elemento-con-float/
https://www.campusmvp.es/recursos/post/display-flow-root-para-limpiar-floats-css.aspx

Si no sabes que es “Posicionamiento flotante” puede ser que te impida entender bien la clase, yo necesité leerlo para entender.
Aquí puedes revisar el concepto:
https://uniwebsidad.com/libros/css/capitulo-5/posicionamiento-flotante

Ahora todo tiene sentido, siempre que aprendía sobre CSS decían: “Coloca el float: left; pero también ponle un overflow para que se arregle”, pero nadie decía por qué se arreglaba, ahora comprendo mejor el concepto.
.
Básicamente es como crear pequeños layouts dentro del mismo elemento por lo que entiendo, y en el caso del inline-block, se crean ambos layouts, lo que nos permite trabajar con las propiedades de ambas 🤔

Vengo del curso de CSS Grid Layout, y este tiene el mismo problema que el otro: diapositivas, tal vez sea la forma en que ella enseña mejor. Pero se siente como una presentación de Slideshare o Prezi. La verdad no me está gustando este curso, espero que haya un poco más de práctica a lo largo del curso. 😥

🍞 Contextos de formato: Formato de Contexto de Bloque (BFC)

<h4>Apuntes</h4>
  • 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
1.png
  • 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
2.png
  • El layout interno se rompe una vez quitado el mismo
3.png
  • 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
4.png
  • 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
<h4>¿Qué más crea un BFC?</h4>
  • Utilizar position: absolute o position: fixed
  • El uso de
    • display: inline-block
    • display: table-cell
    • display: table-caption

<h4>Flexbox y Grid</h4>
  • Ambos formatos nacieron con la intensión de facilitar el diseño de la página

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

<h4>Flexbox</h4>
  • Contexto de formato flexible ⇒ El elemento está participando en un diseño flexible
  • Se basa en un formato donde se le da flexibilidad a los elementos y al contenedor
<h4>CSS Grid</h4>
  • Contexto de formato de cuadricula ⇒ El elemento está participando en un diseño de cuadricula
  • Adquiere un formato de cuadricula realmente fácil de ordenar

  • display: inline-block crea un BFC y su hermano display: flow-root
    • display: inline-block ⇒ Da un BFC en una caja en línea
      • Consta en una fusión de ambas partes, donde al igual que inline-flex e inline-block, externamente el elemento se sitúa de forma inline, pero por dentro puede adoptar propiedades block como width, left, etc…
    • display: flow-root ⇒ Da un BFC en una caja de bloque
      • Permite posicionar correctamente los elementos float (que, al ser float, se descolocan del flujo, y al resetearlo lo vuelve a ubicar) esto es genial para casos donde tienes que usar elementos flotantes y no quieres que se te desordene toda la caja
  • Todo lo trabajamos bajo los conceptos de block e inline y se explica el diseño de CSS bajo estos dos conceptos
5.png
  • Podemos controlar el tipo de cuadro que se genera utilizando la propiedad display

RESUMEN: BFC (Block Formatting Context) es un pequeño layout el cual esta aparte de todo el documento. Este mismo se puede generar a partir de la propiedad position, pero cada una tiene su característica de manejar el contexto de formato. Diferentes elementos tienen su contexto de bloque

Acá le dejo el código del ejemplo del video para que puedan experimentar con las propiedades.
HTML.

 <div class="outer">
        <div class="float"> I am a floated element.</div>
        I am text inside the outer box

    </div>

CSS.

.outer {
    border: 5px dotted rgb(214, 129, 137);
    border-radius: 5px;
    width: 450px;
    padding: 10px;
    margin-bottom: 40px;
    overflow: auto;
}

.float {
    padding: 10px;
    border: 5px solid rgba(214, 129, 137, .4);
    border-radius: 5px;
    background-color: papayawhip;
    float: left;
    width: 200px;
    margin: 0 20px 0 0;
    
}
reto.PNG

Oooh 😮 Que interesante!! Los he utilizado, pero no sabia lo que había detrás de todo esto.

por favor platzi actualizen el curso ¡¡¡¡¡ porfavor recomiendo mas practica que teoria

como alguien que maqueta hace años, les digo que la mayoría de esta información es totalmente innecesaria, en más de 10 años jamás supe ni que existía el termino BFC. Maquetar es 99% práctica, este curso es 99% teoría…

Les recomiendo leer este post:
https://www.paradigmadigital.com/dev/css-display-dos-caras-de-misma-moneda/ me ayudo mucho a entender el tema de los display complementa muy bien lo de la clase sobre todo por los Outer/Inner values que no se mencionan

BFC.png

Como crítica constructiva en el min 4:08, deberían revisar bien los colores que usan para las diapos de las clases. No se ve bien el color “turquesa”, cansa la vista.

Luego todo bien.

Por defecto, los elementos se presentan como block o inline, depende de que elemento hablemos, pero cuando colocamos display:grid/flex, le estamos dando un valor de BOXGRID o FLEXBOX, por eso, si nosotros queremos un comportamiento inline dentro del grid o flex debemos colocar INLINE-FLEX o INLINE-GRID.
Pero tambien hay una mezcla de ambos de los estilos por defecto, INLINE-BLOCK. Para entender esto, debemos conocer el BFC (Block Formatting Context), esto es como una interfaz dentro de nuestra interfaz y asi poder tener estructuras dentro de la estructura general, por ejemplo, si nosotros colocamos un texto corto y queremos agregarle una imagen mas alta que el texto con un float: left; y a esto le agregamos un border, el border tendra menos height que la imagen, esto se puede arreglar con un overflow: auto;
¿y por qué esto funciona? Porque el overflow crea un BFC si su valor es diferentea “visible”. Otras propiedades que crean un BFC son el position: absolute/fixed; y el uso de display: inline-block/table-cell/table-caption;
VALE ACLARAR que normalmente en nuestros layouts utilizamos bloques en linea
Cuando hablamos de display: inline-block; este nos generara un BFC en una caja EN LINEA. A diferencia de su hermano, display:flow-root; que nos generara un BFC en una caja de bloque
Para FlexBox, en vez de crar un BFC, se crea un “contexto de formato flexible” que quiere decir que es parte de un flexible, y para Grid un “contexto de formato de cuadricula” que significa que forma parte de una cuadricula.

Block Formatin Context => Es un mini layout dentro de tu layout.

  • Display: inline-block; => Da un BFC en una caja en línea.
  • Display: flow-root; => Da un VFC en una caja de bloque.

Es un mini layout dentro de nuestro layout.

En ocaciones cuando tenemos elementos flotntes dentro de contenedores, estos se achican y el elemento flotante queda ahi sobrando o desvordandose. Para poder arreglar esto podemos un overflow:auto. Esto funciona porque la propiedad overflow crea un BFC si su valor es diferente al inicial. Y una de las caracteristicas de BFC es que contiene flotantes.

Un BFC tambien nos permite utilizar un position: absolute o fixed.

El uso de display:inline-block display:table-cell o display:table-caption.

Flexbox y CSS Grid crean algo asi como un BFC, excepto que se describe de la siguiente manera:

Flexbox: Contexto de Formato Flexible

Grid: Contexto de formato de cuadricula.

Display:Inline-block crea un BFC pero tiene un hermano menor que es Display:Flow-root que nos crea una caja de bloque.

Podemos controlarel tipo de cuadrado que se genera utilizando la propiedad display.

Hasta el momento 6/10

Algunos elementos inline, block y inline-block

Resumiendo para crear un BFC y salvar el error hay dos alternativas, la primera sin usar flex o grid y la segunda usando flex o grid
Sin flex o grid
En este caso en la clase padre defino alguna de las siguientes reglas

display: inline-block;
overflow: auto;
position: absolute;
position: fixed;

Y en la clase hijo mantengo la propiedad
float: left;

Con flexbox
Es mas intuitivo ya que no necesito en la clase hijo la propiedad
float: left;
La elimino y agrego en la clase padre la propiedad
display:flex
y con esto soluciono el problema

Si valiosa información quieres obtener, nunca parar de aprender entonces debes
"Yoda version "

Formato de Contexto de Bloque (BFC).
Es un layout pequeño, dentro de nuestro layout principal. Es como tener pequeñas estructuras dentro de nuestra estructura general.
Cuando uno de los elementos pequeños sobre pasa los límites del elemento principal, se produce un overflow, que podemos arreglar con la propiedad overflow: auto;.

overflow: auto;: Crea un BFC si su valor es diferente al inicial (visible).

BFC (block formatting context).

  • Tiene como característica contener flotantes.
  • Puedes utilizar position: absolute | fixed.
  • Puedes usar display: inline-block | table-cell | table-caption.

El similar de BFC.
Flexbox: Contexto de Formato Flexible, significa que el elemento está participando en un diseño flexible.
CSS Grid: Contexto de Formato de Cuadrícula, significa que el elemento está participando en una cuadrícula.

display: inline.block; Da un BFC en una caja en línea.
display: flow-root; Da un BFC en una caja de bloque.

Notas de la clase
Captura de pantalla 2021-04-28 032208.pngCaptura de pantalla 2021-04-28 032228.pngCaptura de pantalla 2021-04-28 032242.png

Excelente aporte

photo_2021-04-15_14-14-08.jpg

Y yo creyendo que ya sabia mucho de CSS 🤔

Entender lo que hacemos vuelve el trabajo algo más efectivo y racional, al menos en mi caso siempre que escribía líneas y líneas a veces definía un width, un margin o cualquier propiedad inherente a un elemento en _bloque _y simplemente no funcionaba, como resultado me frustraba o pasaba horas intentando averiguar el error. Tener bases teóricas ayuda realmente en la solución de muchos errores

Todas las etiquetas del lenguaje HTML se pueden clasificar en etiquetas de línea o de bloque.

Una etiqueta de línea es aquella que ocupa el espacio mínimo necesario en horizontal, y permite que otro elemento se coloque a su lado. En cambio una etiqueta de bloque, ocupa todo el ancho disponible y no permite que otro elemento se coloque a su lado (aunque aparentemente tenga lugar suficiente).

Etiquetas de línea (las más usadas):
<a>, <span>, <strong>, <img>, <input>, <code>

Etiquetas de bloque (las más usadas):
<h1>, <h2>, <h3>, <p>, <ul>, <li>, <div>, <header>, <nav>, <section>, <article>, <footer>, <form>, <table>

Me encanto este dato! Muchas gracias!

Un contexto de formato de bloque es parte del renderizado CSS visual de una página web. Es la región en que ocurre la disposición de las cajas de bloque y en la cuál los elementos flotantes interactúan los unos con los otros.