¿Cómo funciona el contexto de formato de bloque CSS?

¿Cómo funciona el contexto de formato de bloque CSS ?

Las especificaciones CSS2.1 dicen que en un contexto de formato de bloque, los cuadros se colocan verticalmente, comenzando en la parte superior. Esto sucede incluso si hay elementos flotantes en el camino, excepto si el cuadro de bloque estableció un nuevo contexto de formato de bloque. Como sabemos, cuando los navegadores renderizan cuadros de bloque en un contexto de formato de bloque, se omite el elemento flotante, ¿por qué funciona el establecimiento de un nuevo contexto de formato de bloque?

¿Cómo se distribuyen las cajas (cajas de bloques y cajas en línea) en el flujo normal?

Leí en alguna parte que los elementos de bloque generan cuadros de bloque, pero los elementos flotantes se ignoran cuando un agente de usuario dibuja un cuadro y los tiene en cuenta cuando completan el contenido. Si bien los elementos flotantes se superpondrán al límite de los cuadros de otros elementos, la solución es establecer un nuevo contexto de formato de bloque para los elementos superpuestos que utilizan overflow:hidden.

"El nuevo contexto de formato de bloque sigue siendo formato de bloque", por lo que al dibujar un cuadro, también tratará el elemento flotante como si no saliera. ¿Es correcto o he entendido mal "nuevo contexto de formato de bloque"?

Actualización: más preguntas

Al decir "Este comportamiento es útil para diseños de estilo en columnas. Sin embargo, su uso principal es detener flotantes, por ejemplo, en un div de" contenido principal ", limpiando las columnas laterales flotantes, es decir, flotantes que aparecen antes en el código fuente".

No entiendo el significado, te daré un ejemplo, tal vez me entiendas.

.content {
  background: #eee;
  color #000;
  border: 3px solid #444;
  width: 500px;
  height: 200px;
}
.float {
  background: rgba(0, 0, 255, 0.5);
  border: 1px solid #00f;
  width: 150px;
  height: 150px;
  float: right;
}
p {
  background: #444;
  color: #fff;
}

<div class="content">
  <h3>This is a content box</h3>
  <p>It contains a left floated box, you can see the actual content div does go under the float, but that it is the &lt;h3&gt; and &lt;p&gt; <b>line boxes</b> that are shortened to make room for the float. This is normal behaviour.</p>
  <div class="float">floated box</div>
</div>

Pensé que la caja flotante debería flotar hasta la parte superior del bloque de contenido, el div con clase content. Además, si el cuadro flotante aparece antes en el marcado, mostrará lo que creo que debería ser.

.content {
  background: #eee;
  color #000;
  border: 3px solid #444;
  width: 500px;
  height: 200px;
}
.float {
  background: rgba(0, 0, 255, 0.5);
  border: 1px solid #00f;
  width: 150px;
  height: 150px;
  float: right;
}
p {
  background: #444;
  color: #fff;
}

<div class="content">
  <div class="float">floated box</div>
  <h3>This is a content box</h3>
  <p>it contains a left floated box, you can see the actual content div does go under the float, but that it is the &lt;h3&gt; and &lt;p&gt; <b>line boxes</b> that are shortened to make room for the float, this is normal behaviour</p>
</div>

¿Comó podemos explicar esto? ¿Podemos usar "contexto de formato de bloque y contexto de formato en línea" para explicarlo?

Contextos de formato de bloque

Flotadores, elementos absolutamente posicionados, contenedores de bloques (como bloques en línea, celdas de tabla y títulos de tabla) que no son cajas de bloque y cajas de bloque con 'desbordamiento' que no sea 'visible' (excepto cuando ese valor se ha propagado a la ventana gráfica) establecen nuevos contextos de formato de bloque para su contenido.

Con mi negrita, es el de establecer bits que es importante

Lo que esto significa es que el elemento que usa overflow(cualquier cosa que no sea visible) floato inline-block..etc on se convierte en responsable del diseño de sus elementos secundarios. Son los elementos secundarios los que luego están "contenidos", ya sean flotantes o márgenes colapsantes, deben estar completamente contenidos por su padre delimitador.

En un contexto de formato de bloque, el borde exterior izquierdo de cada cuadro toca el borde izquierdo del bloque contenedor (para formateo de derecha a izquierda, los bordes derechos se tocan)

Lo que significa la línea anterior:

Debido a que un cuadro solo puede ser rectangular y no de forma irregular, esto significa que un nuevo contexto de formato de bloque entre dos flotantes (o incluso al lado de uno) no se ajustará alrededor de los flotantes laterales vecinos. Las cajas secundarias internas solo pueden extenderse hasta tocar el borde izquierdo (o derecho en RTL) de sus padres. Este comportamiento es útil para diseños de estilo columnar. Sin embargo, su uso principal es detener flotantes, por ejemplo, en un div de "contenido principal", limpiando realmente las columnas laterales flotantes, es decir, flotantes que aparecen antes en el código fuente.

Liquidación del flotador

En circunstancias normales, se supone que los flotantes borran todos los elementos flotantes anteriores, que anteriormente estaban flotando en todo el código fuente, no solo en la "columna" mostrada. La cita reveladora de las "especificaciones de liquidación flotante" es:

Esta propiedad indica qué lados de la (s) caja (s) de un elemento pueden no estar adyacentes a una caja flotante anterior. La propiedad 'clear' no considera flotantes dentro del propio elemento o en otros contextos de formato de bloque

Entonces, digamos que tiene un diseño de tres columnas donde las columnas izquierda y derecha flotan a izquierda y derecha respectivamente, las columnas laterales ahora están en nuevos contextos de formato de bloque, porque están flotadas (recuerde que flotar es también una de las propiedades que establecen un nuevo BFC ), por lo que puede flotar felizmente los elementos de la lista dentro de ellos y solo borran los flotantes que ya están dentro de las columnas laterales que ya no les importan los flotantes anteriormente en el código fuente

¿Convertir el contenido principal en un nuevo contexto de formato de bloque o no?

Ahora que la columna del medio, simplemente puede marginarla desde ambos lados para que parezca encajar ordenadamente entre las dos columnas flotantes laterales y tomar el ancho restante, una forma común de obtener el ancho deseado si la columna central es "fluida", lo que estará bien hasta que necesite usar flotadores / espacio libre dentro de su div de contenido (una ocurrencia común para aquellos que usan trucos o plantillas de "clearfix" que los incluyen)

Toma este código muy simple:

#left-col {
  border: 1px solid #000;
  width: 180px;
  float: left;
}
#right-col {
  border: 1px solid #000;
  width: 180px;
  float: right;
  height: 200px;
}
#content {
  background: #eee;
  margin: 0 200px;
}
.floated {
  float: right;
  width: 180px;
  height: 100px;
  background: #dad;
}

<div id="left-col">left column</div>
<div id="right-col">right column</div>

<div id="content">
  <h3>Main Content</h3>
  <p>Lorem ipsum etc..</p>
  <div class="floated">this a floated box</div>
  <div class="floated">this a floated box</div>
</div>

Produce lo siguiente:

En general, esto está bien, especialmente si no tiene colores de fondo o flotadores internos (en el contenido principal); observe que los flotadores están bien (aún no se han limpiado); probablemente estén haciendo lo que usted les pide, pero ellos, los H3de arriba margin y el pmargen inferior del 'no están realmente contenidos en el contenido div (fondo gris claro).

Entonces, al mismo escenario con margen simple del código anterior, agregue:

.clear-r {clear: right;}

al CSS y cambie el segundo cuadro flotante HTML a:

<div class="floated clear-r"> this a floated cleared box</div>

#left-col {
  border: 1px solid #000;
  width: 180px;
  float: left;
}
#right-col {
  border: 1px solid #000;
  width: 180px;
  float: right;
  height: 200px;
}
#content {
  background: #eee;
  margin: 0 200px;
}
.floated {
  float: right;
  width: 180px;
  height: 100px;
  background: #dad;
}
.clear-r {
  clear: right;
}

<div id="left-col">left column</div>
<div id="right-col">right column</div>

<div id="content">
  <h3>Main Content</h3>
  <p>Lorem ipsum etc..</p>
  <div class="floated">this a floated box</div>
  <div class="floated clear-r">this a floated cleared box</div>
</div>

Esta vez obtienes esto:

El segundo flotador está limpiando el lado derecho pero está limpiando toda la altura de la columna derecha. La columna de la derecha aparece antes en el código fuente, por lo que se borra como se indica. Sin embargo, probablemente no sea el efecto deseado, tenga en cuenta también que los márgenes h3y ptodavía están colapsados ​​(no contenidos).

¡Haga que establezca un contexto de formato de bloque, por el bien de los niños!

y finalmente haga que la columna de contenido principal asuma la responsabilidad ( conviértase en un Contexto de formato de bloque ) de su contenido: elimine margin: 0 200px;del contenido principal CSS y ADD overflow: hidden; y obtendrá esto:

#left-col {
  border: 1px solid #000;
  width: 180px;
  float: left;
}
#right-col {
  border: 1px solid #000;
  width: 180px;
  float: right;
  height: 200px;
}
#content {
  background: #eee;
  overflow: hidden;
}
.floated {
  float: right;
  width: 180px;
  height: 100px;
  background: #dad;
}
.clear-r {
  clear: right;
}

<div id="left-col">left column</div>
<div id="right-col">right column</div>

<div id="content">
  <h3>Main Content</h3>
  <p>Lorem ipsum etc..</p>
  <div class="floated">this a floated box</div>
  <div class="floated clear-r">this a floated cleared box</div>
</div>

Esto probablemente se parezca mucho más a lo que esperaría que suceda, tenga en cuenta que ahora los flotadores están contenidos, se borran correctamente ignorando la columna del lado derecho, y también los márgenes h3y pestán contenidos en lugar de contraídos.

Con el uso extensivo de restablecimientos en estos días, los márgenes son menos notables (e IE todavía no los hace del todo bien); sin embargo, lo que acaba de pasar con el "contenido principal" central es que se convirtió en un Contexto de formato de bloque y ahora es responsable de su propios elementos secundarios (descendientes). En realidad, es muy similar a la noción de hasLayout de los primeros días de Microsoft, usa las mismas propiedades display: inline-block, floaty overflowcualquier cosa que no sea visible, y por supuesto, las celdas de la tabla siempre tienen diseño ... sin embargo, no tiene errores;)

Espero que ayude un poco, ¡cualquier pregunta no dude en hacerla!

Actualización: re más información en cuestión:

Cuando dice "pero los elementos flotantes se ignoran cuando el agente de usuario dibuja el cuadro y los tiene en cuenta cuando completan el contenido".

Sí, los flotadores normalmente se superponen a sus cajas de contenedores, ¿es eso lo que quiere decir con los límites de los padres? Cuando se dibuja un elemento de bloque y contiene un flotante, el propio bloque principal se dibuja como un rectángulo debajo del flotante y son las "cajas anónimas en línea" o simplemente las "cajas de línea" de los otros elementos secundarios que se acortan para dejar espacio para el flotador

Toma este código:

#content {
  background: #eee;
  color #000;
  border: 3px solid #444;
}
.float {
  background: rgba(0, 0, 255, 0.5);
  border: 1px solid #00f;
  width: 150px;
  height: 150px;
  float: left;
  margin: 10px;
}
p {
  background: #444;
  color: #fff;
}

<div id="content">
  <div class="float">floated box</div>
  <h3>This is a content box</h3>
  <p>it contains a left floated box, you can see the actual content div does go under the float, but that it is the &lt;h3&gt; and &lt;p&gt; <b>line boxes</b> that are shortened to make room for the float, this is normal behaviour</p>
</div>

Que produce esto:

Verá que el elemento padre en realidad no contiene el flotador, ya que no lo envuelve por completo ... el flotador simplemente flota sobre el contenido; si tuviera que seguir agregando contenido al div, eventualmente se ajustaría debajo del flotador porque ya no habría necesidad de que las "cajas de línea" (anónimas) del pelemento se acortaran.

He coloreado el elemento de párrafo para que pueda ver que en realidad también va debajo del flotador, el fondo gris oscuro es donde comienza el párrafo, el texto blanco es donde comienza el "cuadro de línea anónima"; en realidad, solo ellos "hacen espacio "para el flotante, a menos que le indique lo contrario (es decir, cambie el contexto)

Nuevamente, refiriéndose a la imagen de arriba, si tuviera que marcar el margen del lado izquierdo del pelemento, sí, detendrá el texto que se ajusta debajo de la parte inferior del flotador porque los "cuadros de línea" (el texto blanco) solo tocarán el borde izquierdo de su contenedor, y traerá el fondo de color de la pa la derecha, sin el flotante, pero no habrá cambiado el comportamiento del pcontexto de formato de la. Como la columna central en la primera imagen de arriba;)