estilos - ¿Cómo funciona el contexto de formato de bloque CSS?
estilos css ejemplos (1)
¿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;
}
<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 <h3> and <p> <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 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;
}
<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 <h3> and <p> <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
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.
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;
}
<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 tienes colores de fondo o flotadores 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, los H3 ''s el margen superior y el margen inferior de la p realidad no están realmente contenidos 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:
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! Aunque probablemente no sea el efecto deseado, también tenga en cuenta que los márgenes h3 p aún están contraídos (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 - conviértase en un Contexto de Formato de Bloque - para su contenido: eliminar margin: 0 200px; desde el contenido principal CSS y ADD 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>
Esto es probablemente mucho más parecido a lo que esperaría que ocurriera, nótese que ahora los flotadores están contenidos, se borran correctamente ignorando la columna del lado derecho, y también los márgenes h3 p 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 Microsoft, utiliza la misma display: inline-block propiedades display: inline-block , float y overflow todo lo 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 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 <h3> and <p> <b>line boxes</b> that are shortened to make room for the float, this is normal behaviour</p>
</div>
Que produce esto:
Usted ve 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 lo envolvería debajo del flotador porque no habría necesidad de que los "recuadros de línea" (anónimos) del elemento p acorten 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 del elemento p , sí detendrá el ajuste del texto debajo del flotador porque los "recuadros de línea" (el texto blanco) solo tocarán el borde izquierdo de su contenedor, y traerá el fondo de color de la p a la derecha, fuera del flotador, pero no habrá cambiado el comportamiento del contexto de formato de la p . Al igual que la columna central en el primer cuadro arriba;)