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


Cómo hace el Contexto de formato de bloque CSS ¿trabajo?

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 recuadros de los otros elementos, la solución establece un nuevo contexto de formato de bloque para los elementos superpuestos utilizando 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 "este comportamiento es útil para diseños de estilo columnares. Sin embargo, el 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;
}
<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 contaje, 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?


74
2018-06-01 05:35


origen


Respuestas:


Contextos de formato de bloque

Flotadores, absolutamente posicionados   elementos, contenedores de bloques (como   bloques en línea, celdas de tabla y   table-captions) que no son bloque   cajas y cajas de bloques con 'desbordamiento'   que no sea 'visible' (excepto cuando eso   el valor se ha propagado a la   ventana) establecer nuevos contextos de formato de bloque por sus contenidos.

Con mi audaz, es el establecer poco 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..etc on 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, cada   el borde exterior izquierdo de la caja toca la izquierda   borde del bloque contenedor (para   formateo de derecha a izquierda, bordes derechos   toque)

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", despejando 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 anteriores, que anteriormente aparecían en el código fuente completo, no solo en la "columna" mostrada. La cita reveladora de las "especificaciones de liquidación de flotación" es:

Esta propiedad indica de qué lado   la (s) caja (s) de un elemento pueden no ser   adyacente a una caja flotante anterior.   La propiedad 'clara' no considera   flota dentro del elemento mismo o en otros contextos de formato de bloque

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;
}
<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:

enter image description here

En general, esto está bien, especialmente si no tienes colores de fondo o flotantes internos (en el contenido principal): fíjate que los flotadores están bien (aún no están borrados), probablemente estén haciendo lo que tú los exceptúas. pero ellos, el H3El margen superior y el pEl margen inferior en realidad no está realmente contenido por el contenido div (fondo claro).

Entonces, para el mismo escenario marginal 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:

enter image description here

El segundo flotador está despejando el lado derecho pero está limpiando toda la altura de la columna derecha. ¡La columna de la derecha está flotando antes en el código fuente, por lo que está borrando como se dijo! Probablemente no sea el efecto deseado, también tenga en cuenta el h3 y p los márgenes siguen colapsados ​​(no incluidos).


¡Establezca un contexto de formato de bloque, por el bien de los niños!

y finalmente hacer que la columna de contenido principal asuma su responsabilidad - convertirse en un contexto de formato de bloque - por su contenido: eliminar margin: 0 200px; del contenido principal CSS y AÑADIR  overflow: hidden; y obtienes 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>

enter image description here

Esto es probablemente mucho más parecido a lo que esperaría que ocurriera, nótese que ahora los flotadores están contenidos, se despejan correctamente ignorando la columna del lado derecho, y también el h3 y p los márgenes están contenidos en lugar de colapsados.

Con el uso extensivo de restablecimientos en estos días, los márgenes son menos notorios (y IE todavía no los entiende del todo bien) sin embargo, lo que sucedió con el "contenido principal" del centro es que se convirtió en un contexto de formato de bloque y ahora es responsable de su elementos propios del niño (descendiente). En realidad, es muy similar a la noción de hasLayout de los primeros días de Microsoft, utiliza las mismas propiedades display: inline-block, floaty overflow cualquier cosa que no sea visible, y por supuesto, las celdas de la tabla siempre tienen un diseño ... sin embargo, no tienen errores;)

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


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 toma en cuenta cuando completan el contenido".

Sí, las carrozas normalmente se superponen a sus cajas de contenedores, ¿es eso lo que quieres decir con respecto a los límites de los padres? Cuando se dibuja un elemento de bloque y contiene un flotador, el propio padre de bloque se dibuja como un rectángulo debajo del flotador y son los "cuadros anónimos en línea" o simplemente los "cuadros 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:

how floats work

Usted ve que el elemento padre no contiene realmente el flotador, ya que no lo envuelve por completo ... el flotador es simplemente flotante sobre el contenido: si continuara agregando contenido a la div, eventualmente se ajustaría debajo de la flotación porque no habría necesidad de los "recuadros de línea" (anónimos) del p elemento para acortarse más.

Coloreé el elemento párrafo para que veas que también va debajo del flotador, el fondo oscuro es donde comienza el párrafo, el texto blanco es donde comienza el "recuadro anónimo", solo son ellos los que "hacen espacio". "para el flotador, a menos que le digas lo contrario (es decir, cambias el contexto)

Nuevamente refiriéndonos a la imagen de arriba, si tuvieras que marginar el lado izquierdo delp elemento, sí, detendrá el ajuste de texto debajo del flotador porque los "cuadros de línea" (el texto blanco) solo tocarán el borde izquierdo de su contenedor, y usted traerá el fondo de color del p a la derecha, fuera del flotador, pero no habrás cambiado el comportamiento del pcontexto de formateo Al igual que la columna central en el primer cuadro arriba;)


119
2018-06-01 09:41