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

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

Las especificaciones de CSS2.1 dicen que en un contexto de formato de bloques, los recuadros se disponen 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 representan cuadros de bloque en un contexto de formato de bloque, el elemento flotante se omite, ¿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 el cuadro y los toma en cuenta cuando completan el contenido. Mientras que los elementos flotantes se superpondrán al límite de los cuadros de los otros elementos, la solución establece un nuevo contexto de formato de bloque para los elementos superpuestos que utilizan overflow:hidden .

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

Actualización: más preguntas

Al decir “Es este comportamiento útil para los diseños de estilos columnares. Sin embargo, su uso principal es detener flotantes, por ejemplo, en un div de” contenido principal “, limpiando columnas laterales flotantes, es decir, flotantes que aparecen antes en el código fuente”.

No entiendo el significado, 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; } 
 

This is a content box

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

floated box

Pensé que la caja flotante debería flotar hasta la parte superior del bloque de contaje, el div con content clase. 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; } 
 
floated box

This is a content box

it contains a left floated box, you can see the actual content div does go under the float, but that it is the <h3> and <p> line boxes that are shortened to make room for the float, this is normal behaviour

¿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

Los flotantes, elementos absolutamente posicionados, bloquean contenedores (como bloques en línea, celdas de tabla y leyendas de tablas) que no son cuadros de bloques y bloquean cuadros con ‘desbordamiento’ que no sean ‘visibles’ (excepto cuando ese valor se ha propagado a la ventana gráfica) establecer nuevos contextos de formato de bloque para sus contenidos.

Con mi audacia, es el bit de establecer lo que es importante

Lo que esto significa es que el elemento que usas overflow (cualquier cosa que no sea visible) o float o inline-block en inline-block etc se convierte en responsable del diseño de sus elementos secundarios. Son los elementos secundarios los que quedan “contenidos”, ya sea que floten o que se colapsen los márgenes, deben estar totalmente contenidos por sus padres.

En un contexto de formato de bloque, el borde externo izquierdo de cada cuadro toca el borde izquierdo del bloque que lo contiene (para el formateo de derecha a izquierda, toque los bordes derechos)

Lo que significa la línea anterior:

Debido a que una caja solo puede ser rectangular y no tener una forma irregular, esto significa que un nuevo contexto de formateo de bloques entre dos carrozas (o incluso al lado de uno) no se ajustará a los flotadores laterales vecinos. Las cajas infantiles internas solo pueden extenderse hasta tocar el borde izquierdo de sus padres (o derecha en RTL). Es este comportamiento que es útil para diseños de estilo columnares. Sin embargo, su principal uso es detener flotantes, por ejemplo en un div de “contenido principal”, limpiando columnas laterales flotantes, es decir, flotantes que aparecen antes en el código fuente.


Flotación Liquidación

En circunstancias normales, se supone que los flotadores borran todos los elementos flotantes previos, que anteriormente aparecían en el código fuente completo, no solo en la “columna” que se muestra. La cita de las “especificaciones de espacio libre 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 elemento en sí o en otros contextos de formateo de bloques

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


¿Para hacer que el contenido principal sea un nuevo contexto de formato de bloque o no?

Ahora que la columna del medio, puede simplemente marginarla desde ambos lados para que parezca estar 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 hará Estará bien hasta que necesite usar flotadores / espacio dentro de su div de contenido (una ocurrencia común para aquellos que usan hacks o plantillas “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; } 
 
left column
right column

Main Content

Lorem ipsum etc..

this a floated box
this a floated box