BFC—块级格式化上下文及其作用

原创已于 2024-11-24 00:45:03 修改 · 604 阅读

16 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #前端 #css3

于 2024-11-24 00:39:45 首次发布

FC—Formatting Contexts 格式化上下文

首先了解一下FC，FC的全称是Formatting Context，格式化上下文。

格式化上下文有几种类型，包括块格式化上下文 Block Formatting Context（BFC）、内联格式化上下文Inline Formattiing Context（IFC）和灵活格式化上下文Flex Formattiing Context。每个格式上下文在其上下文中都有特定的布局规则。

平时开发的页面上的所有内容都是格式化上下文FC的一部分。

BFC—Block Formatting Context

块级格式化上下文（BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

文档最外层元素使用块布局规则的称为初始块格式上下文。即意味着<html>元素块中的每个元素都是按照正常流程遵循块和内联布局规则进行布局的。

任何块级元素都可以通过应用某些 CSS 属性来创建一个 BFC。

以下情况会创建一个新的BFC：

根元素（<html>）
浮动元素（元素的float不为none）
绝对定位元素（包含position: fixed 或 position: absolute）
行内块元素（display: inline-block）
表格单元格或使用 display: table-cell，包括用 display: table-* 属性的所有表格单元格
表格标题或使用 display: table-caption 的元素
overflow 不为 visible 或 clip 的块级元素
display 为 flow-root 或 display: flow-root list-item 的元素
flex items 弹性元素
网格布局元素（grid）

BFC的作用

BFC官方描述的简单概括：

在BFC中，box（即盒子）会在垂直方向上一个挨着一个排布，垂直方向上的间距由 margin 属性决定。

在同一个BFC中，相邻两个box之间的margin会折叠。

在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的。

作用：

1、解决margin的折叠问题

<div class="box1"></div>
<div class="box2"></div>

.box1 {
    width: 200px;
    height: 100px;
    background-color: red;
    margin-bottom: 30px;
}
.box2 {
    width: 400px;
    height: 100px;
    background-color: blue;
    margin-top: 50px;
}

实现以上代码会发现，box1和box2间的间距为50px而不是80px。这是因为两个box在同一个BFC中，相邻两个box间的margin会折叠。

怎么解决呢？

使两个box不在同一个BFC中。

参考前面的创建BFC的方法，实现如下：

<div class="container">
    <div class="box1"></div>
</div>
<div class="box2"></div>

.container {
    overflow: auto;
}
.box1 {
    width: 200px;
    height: 100px;
    background-color: red;
    margin-bottom: 30px;
}
.box2 {
    width: 400px;
    height: 100px;
    background-color: blue;
    margin-top: 50px;
}

需要注意的是，如果直接给box1 或 box2 添加 overflow: auto，是无效的，因为此时box1和box2仍然处于同一个BFC下。

正确的做法是给box1加一层容器，使这个容器创建一个新的BFC，此时box1处于container这个BFC中，而box2处于html这个BFC中。处于不同的BFC中，折叠问题得以解决，此时box1 和 box2 的间距为80px。

2、解决浮动元素高度塌陷的问题

浮动元素会脱离文档流，其父元素在计算高度的时候，不会把浮动元素的高度计算进去，这就导致了父元素高度塌陷的问题。可以通过清除浮动来解决。

<div class="container clear_fix">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<style>
    .container {
        background-color: purple;
    }
    .item {
        width: 300px;
        height: 200px;
        border: 1px solid #000;
        float: left;
        background-color: yellow;
    }
    .clear_fix::after {
        content: "";
        display: block;
        clear: both;
    }
</style>

通过创建一个空的伪元素来清除浮动。

而BFC也可以解决浮动元素高度的塌陷问题，但不能解决绝对定位元素的高度塌陷问题。

事实上，BFC解决浮动元素高度塌陷问题时需要满足以下两个条件：

浮动元素的父级元素触发BFC，形成独立的块级格式化上下文
浮动元素的父元素的高度为auto（不设置height时默认为auto）

在BFC的高度为auto的情况下，其高度的计算方法如下：

1、若只有行内元素，高度为行高的顶部和底部的距离

2、若有块级元素，高度为最顶部的块上边缘和最低部的块下边缘之间的距离

3、若有绝对定位元素，将会被忽略（这就是BFC无法解决绝对定位元素高度塌陷问题的原因）

4、若有浮动元素，那么会增加高度以包括这些浮动元素的下边缘（BFC解决浮动元素高度塌陷问题的原理）

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<style>
    .container {
        background-color: purple;
        overflow: auto;
    }
    .item {
        width: 300px;
        height: 200px;
        border: 1px solid #000;
        float: left;
        background-color: yellow;
    }
</style>

给父级元素（container）加上overflow: auto使其触发BFC，即解决了其高度塌陷的问题。