Una parte muy importante de CSS es el contexto de formato de nivel de bloque BFC. Este artículo organiza el conocimiento relevante de CSS BFC. Se recomienda comer después de bañarse y vestirse.
Antes de explicar formalmente BFC, primero comprendamos el problema de la superposición de los márgenes del navegador.
Superposición de márgenes
MDN : los márgenes superior e inferior de un bloque (margin-top) y los márgenes inferiores (margin-bottom) a veces se fusionan (colapsan) en un solo margen cuyo tamaño es el máximo del margen único (o si son iguales, solo entre ellos a), este comportamiento se denomina margen colapsado . Nota : la superposición de márgenes se produce en elementos a nivel de bloque, y los elementos con float y position=absolute no producirán un comportamiento de superposición de márgenes.
Hay tres situaciones en las que los márgenes se superponen:
- Entre elementos adyacentes en el mismo nivel : Los márgenes entre dos elementos adyacentes se superponen. El margen de box1 y box2 es 200px
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
.box1{
margin-bottom: 100px;
}
.box2{
margin-top: 200px;
}
</style>
<div class="box1"></div>
<div class="box2"></div>
复制代码- **Ningún contenido separa los elementos principal y descendiente:** Si no hay borde, relleno, contenido en línea y no se crea un contexto de formato a nivel de bloque, el elemento de bloque principal y sus elementos de bloque descendientes se superpondrán al borde exterior . la porción eventualmente se desbordará fuera del elemento del bloque principal . De la siguiente manera: el envoltorio tiene un margen superior de 100 px y no hay un margen superior de 100 px entre el cuadro y el envoltorio.
<style>
.wrapper {
width: 200px;
height: 200px;
background-color: pink;
}
.box{
width: 100px;
height: 100px;
margin-top: 100px;
background-color: powderblue;
}
</style>
<div class="wrapper">
<div class="box"></div>
</div>
复制代码- **Elemento de nivel de bloque vacío:** En el siguiente ejemplo, hay una distancia de 200 px entre el contenido 1 y el contenido 2.
<style>
div {
margin-top: 100px;
margin-bottom: 200px;
}
</style>
<p>内容1</p>
<div></div>
<p>内容2</p>
复制代码contexto de formato
Contexto de formato en línea
Los cuadros en línea se organizan uno tras otro en el orden determinado por la configuración del modo de escritura:
- Para el modo de escritura horizontal, los cuadros están dispuestos horizontalmente desde la izquierda
- Para el modo de escritura vertical, las cajas están dispuestas horizontalmente desde la parte superior
.horizontal {
writing-mode: horizontal-tb; // 从左开始
}
.vertical {
writing-mode: vertical-rl; // 从上开始
}
复制代码contexto de formato de bloque
块格式化上下文（Block Formatting Context，BFC） 是 Web 页面的可视 CSS 渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。形成独立的渲染区域，内部元素的渲染不会影响外界。
总结来说具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
触发BFC的条件「常见」
- 根元素（）
- 浮动元素（元素的 float 不是 none）
- 绝对定位元素（元素的 position 为 absolute 或 fixed）
- 行内块元素（元素的 display 为 inline-block、table-cells、flex）
- overflow 值不为 visible 的块元素 (hidden、auto、scroll)
BFC的特性
- BFC是独立容器，容器内部元素不会影响容器外部元素。
- 计算BFC的高度时，浮动元素也参与计算。
- BFC的区域不会与float的元素区域重叠。
注意：很多博客都会将属于同一个BFC的两个相邻盒子的margin会发生重叠认为是BFC的特性，不是！不是！没有触发 BFC 也是如此排列的。BFC 可以解决这种重叠，但对于margin重叠，我们通常不解决，合理利用就好了。
BFC的常用案例：
1、解决 margin 重叠
- 相邻子元素的重叠
内部的盒子会在垂直方向上一个接一个的放置，垂直方向上的距离由margin决定。BFC可以避免margin折叠，例子：
<style>
.wrapper{
border: 1px solid black;
}
.box {
width: 200px;
height: 200px;
background-color: #999;
}
.box1 {
margin-bottom: 100px;
}
.box2 {
margin-top: 200px;
}
</style>
<div class="wrapper">
<div class="box1 box"></div>
<div class="box2 box"></div>
</div>
复制代码如下图，在普通文档流中，两个相邻容器的上下margin会重叠，并且取其最大的margin。
如果让其中一个盒子处于独立的BFC中，就不会重叠。如下图
<style>
.wrapper{
border: 1px solid black;
}
.wrapper2{
overflow: hidden;
}
.box {
width: 200px;
height: 200px;
background-color: #999;
}
.box1 {
margin-bottom: 100px;
}
.box2 {
margin-top: 200px;
}
</style>
<div class="wrapper">
<div class="wrapper2">
<div class="box1 box"></div>
</div>
<div class="box2 box"></div>
</div>
复制代码- 父子元素的margin重叠
<style>
.wrapper{
width: 200px;
height: 200px;
background: powderblue;
overflow: hidden;
}
.box{
width: 100px;
height: 100px;
margin-top: 100px;
background: pink;
}
</style>
<div class="wrapper">
<div class="box"></div>
</div>
复制代码La figura 1 a continuación muestra que el margen superior del cuadro se desborda al elemento principal sin activar el BFC. La Figura 2 a continuación muestra que el BFC se activa y los elementos internos no afectarán a los externos.
2. Distribuya la altura del elemento principal flotante
Al calcular la altura del BFC, los elementos flotantes también participan en el cálculo. Puede usar esto para estirar el elemento principal.
<style>
.wrapper{
border: 1px solid black;
}
.box{
width: 100px;
height: 100px;
background: pink;
float: left;
}
</style>
<div class="wrapper">
<div class="box"></div>
</div>
复制代码Debido a que el flotador se separará del flujo normal y formará un flujo flotante, los elementos secundarios no estirarán la altura principal. Como se muestra abajo
Cuando se activa el BFC, el elemento flotante cuenta en el cálculo de la altura.
<style>
.wrapper{
border: 1px solid black;
overflow: hidden;
}
.box{
width: 100px;
height: 100px;
background: pink;
float: left;
}
</style>
<div class="wrapper">
<div class="box"></div>
</div>
复制代码3, puede borrar el flotante
El área de BFC no se superpone al área del elemento flotante. Entonces se puede usar para limpiar el flotador.
<style>
.box1{
width: 100px;
height: 100px;
background: pink;
float: left;
}
.box2{
width: 200px;
height: 200px;
background: powderblue;
}
</style>
<div class="box1"></div>
<div class="box2"></div>
复制代码El resultado es como se muestra en la siguiente figura. Como puede ver, el cuadro 2 se superpondrá con el cuadro 1.
Cuando activamos el BFC, podemos ver la imagen de abajo, que no se superpone con el flotador
<style>
.box1{
width: 100px;
height: 100px;
background: pink;
float: left;
}
.box2{
width: 200px;
height: 200px;
background: powderblue;
overflow: hidden;
}
</style>
<div class="box1"></div>
<div class="box2"></div>
复制代码4. Implementar diseños de dos y tres columnas
- El área de BFC no se superpone al área del elemento flotante. Esta característica también permite diseños de dos columnas. Establezca un ancho fijo para columnas fijas y habilite BFC para columnas no fijas.
<style>
.left{
width: 100px;
height: 100px;
background: pink;
float: left;
}
.right{
height: 100px;
background: powderblue;
overflow: hidden;
}
</style>
<div class="left"></div>
<div class="right"></div>
复制代码- El diseño de tres columnas es el mismo, la izquierda y la derecha son fijas y el medio no es fijo. Cabe señalar que el div en la parte media del centro debe colocarse detrás de la izquierda y la derecha.
<style>
.left {
width: 100px;
height: 100px;
float: left;
background: #ffc0cb;
}
.right {
width: 100px;
height: 100px;
float: right;
background: #ffc0cb;
}
.center{
height: 100px;
background: powderblue;
overflow: hidden;
}
</style>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
复制代码5. Evite el ajuste de texto flotante.
Es inútil, pero es un uso.
<style>
.left {
width: 100px;
height: 100px;
background: #ffc0cb;
float: left;
}
p{
width: 200px;
background: powderblue;
overflow: hidden;
}
</style>
<div class="left"></div>
<p>
你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界
</p>
复制代码A menudo usamos float para lograr el efecto periódico del ajuste de texto, pero si no desea ajustar... puede activar la implementación de BFC
Espero que te sea de utilidad, recuerda darle like y seguir~