理解BFC

女爷i 2022-01-20 03:03 283阅读 0赞

# 理解BFC #

更好阅读体验移步：[zhangzippo.github.io/posts/2019/…][zhangzippo.github.io_posts_2019]

BFC(格式化上下文)在整个css体系中是比较重要的概念，也牵扯了很多其他问题比如如浮动、定位、盒模型等，这篇文章主要帮助理解bfc的概念，特性和应用场景。

## 概念 ##

先看一段来自MDN的定义：

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

嗯，非常严谨且官方（就是看不懂）那么我尝试用一种便于理解的方式来解释这个BFC，你可以简单的理解BFC就是页面上的一块儿区域，这个区域有一些特性，并且该区域内部有一套自己的规则不对外界元素产生干扰，是一块相对独立的渲染区域。（注意，参与BFC的是块盒子）

参考其他博客中我认为最贴切的解释： 块格式上下文是页面CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。

产生这块区域需要满足以下几种条件：

>  *  ***根元素或包含根元素的元素***
>  *  ***浮动元素（元素的 `float` 不是 `none`）***
>  *  ***绝对定位元素（元素的 `position`为 `absolute` 或 `fixed`）***
>  *  ***行内块元素（元素的 `display`为 `inline-block`）***
>  *  ***`overflow` 值不为 `visible` 的块元素***
>  *  ***`display` 值为 `flow-root` 的元素***
>  *  表格单元格（元素的 `display`为 `table-cell`，HTML表格单元格默认为该值）
>  *  表格标题（元素的 `display` 为 `table-caption`，HTML表格标题默认为该值）
>  *  匿名表格单元格元素（元素的 `display`为 `table`、`table-row`、 `table-row-group`、`table-header-group`、`table-footer-group`（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 `inline-table`）
>  *  `contain`值为 `layout`、`content`或 `strict` 的元素
>  *  弹性元素（`display`为 `flex` 或 `inline-flex`元素的直接子元素）
>  *  网格元素（`display`为 `grid` 或 `inline-grid` 元素的直接子元素）
>  *  多列容器（元素的 `column-count`不为 `auto`，包括 `column-count` 为 `1`）
>  *  `column-span` 为 `all` 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中。

可以看出有很多触发BFC区域的条件，其中前几个斜粗体的描述是我们经常遇到也需要重点记住的，后面的几种可以当作扩展了解就好。

这里重点说一下display:flow-root,display:flow-root是什么意思呢？它可以创建无副作用的BFC。在父级块中使用 display: flow-root 可以创建新的BFC。我们刚才分析了上面几种创造bfc的方式，但他们都是有副作用的(比如float会让元素脱离文档流靠左或靠右，position的绝对定位也会脱离文档流，overflow的值也会造成一些额外的影响)，而这个值的设定是单纯创造一个BFC,没有任何其他影响，但是这个属性目前浏览器支持的不是很好，下图是这个值的兼容情况：

## 影响的范围 ##

这里引用MDN的解释：

> 块格式化上下文包含创建它的元素内部的所有内容,但不包括创建了新BFC的子元素的内部元素。 块格式化上下文对浮动定位与清除浮动都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠也只会发生在属于同一BFC的块级元素之间。 这段话的重点在于1:BFC将影响内部包含的所有内容，除非内部创建了新的子BFC区域；2:所有的BFC影响只会发生在同级次的BFC区域中。

如下面的代码，box创建了一个BFC区域，那么将影响son\_1,son\_1-1,son\_2,由于son\_自己创建了一个BFC区域，因此son\_2-1将不受box的BFC影响，而只受son\_2的BFC影响

<div id='box' class='BFC'>
        <div id='son_1'>
            <div id='son_1-1'></div>
        </div>
        <div id='son_2' class='BFC'>
            <div id='son_2-1'></div>
        </div>
    </div>
    复制代码

从下图我门可以看到，外层盒子创造了一块儿BFC区域会清除浮动，第一层因为浮动的关系撑开了外层盒子，由于float:left创造了一块儿新的BFC区域，因此它的子元素的float不会撑开最外层，因此没有受到最外层BFC的影响（没有撑开第二层因为第二层给了固定高度）。这更佳说明了BFC是一块独立区域，并且内部不会影响BFC外部元素的特性。

## 特性 ##

关于以下特性介绍在css2.1规范的文档中（文章结尾文献）有相关介绍，这里前几条是翻译过来讲，后面几条是来自其他文章的总结。

> 特性1：在BFC中，内部块（block块级元素）从顶部开始依次垂直排列。两个同级块之间的垂直距离由“Margin”属性确定。

这个特性没什么说的，就是在BFC区域内部的子块级元素会垂直排列，这点即使不在BFC内其实也是一样的，多个div会在容器内部垂直的一个一个排列。

> 特性2: 内部块垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

这个特性是指相邻的两个子块元素的相隔距离由margin决定，但并不是margin的和，而是会重叠（实际就是是margin之间的最大值），如下代码：

<div class="box">
        <div class="son">
            I am one
        </div>
        <div class="son">
            I am two
        </div>
        <div class="son">
            I am three
         </div>
    </div>
    <style>
    .box {
      background-color: rgb(224, 206, 247);
      display:flow-root; // 创造一个BFC区域
      width:100%;
    }
    .son {
      width: 200px;
      height: 150px;
      background-color: white;
      border: 1px solid black;
      padding: 10px;
      margin:10px 0;
    }
    .son:last-child{
    margin:20px 0;
    }
    </style>
    复制代码

效果如下：

可以看到每个元素之间的margin是10像素，而最后一个box与上方的box之间是20，因为margin的重叠导致了取的是两个相邻box的最大值。

> 特性3：每个子块元素的左外边缘接触包含块的左边缘（对于从右到左的格式，右边缘接触）。即使在存在浮动的情况下也是如此。

这里解释一下，我们知道每一个box模型是由四个层级构成的，如图：

从外到内分别是margin-box，border-box，padding-box和content-box，这个规则的意思就是说我们的子块的外边缘（也就是margin-box边缘）会与BFC区域的边缘（也就是content-box的边缘），即使在子块存在浮动的情况下也是一样的。

.box {
      background-color: rgb(224, 206, 247);
      border: 5px solid rebeccapurple;
      display:flow-root;
    padding: 10px;
    }
    .float {
      float:left; // 添加浮动
      width: 200px;
      height: 150px;
      background-color: white;
      border: 1px solid black;
      margin:0 10px;
    }
    复制代码

内部元素有一个10像素的margin,外部盒子有10像素的padding，内部元素的margin-box的左边与包含块content-box的做边缘接触

> 特性4：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然； 这点在上面我们介绍影响范围的时候介绍过，不再做过多说明了。

> 特性5：计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算 这个特性就是为何子元素浮动，如果要清除浮动可以在父元素上创造一个bfc的解释，这样高度就囊括了浮动元素。 特性6：浮动盒区域不叠加到BFC上

<div class="box"></div>
    <div class="float"></div>
    <style>
      .box { 
        background-color: rgb(224, 206, 247); 
        border: 5px solid rebeccapurple;
        height:100px; 
        width:100px;
        padding:10px; display:flow-root; 
      }
      .float { 
        float:left;
        height: 150px;
        background-color: white; 
        border: 1px solid black; 
        padding: 10px; 
      } 
    </style>
    可以看到浮动元素没有覆盖到bfc上面
    复制代码

## 应用 ##

**1. 分属于不同的BFC时可以阻止margin重叠** 根据特性2我们知道，BFC内的元素排列时margin会重叠，因此我们为了防止重叠，可以使两个元素创建自己的bfc，这样margin就不会重叠。 **2. 可以包含浮动元素——清除内部浮动** 根据特性五可以得知。 **3. 可以阻止元素被浮动元素覆盖** 根据特性六，只需要将被覆盖的元素创建成为BFC就可以解决这个问题。 **4. 自适应两栏布局** 我们可以利用bfc的特性来构造两栏布局：

<div class="left"></div>
    <div class="right"></div>
    <style>
      .left{
    background:yellow;
    width:200px;
    height:400px;
    float:left;
    }
    .right{
    background:pink;
    height:400px;
    /*添加overflow:hidden，触发元素BFC*/
    overflow:hidden;
    }
    </style>
    复制代码

当然我们也可以利用该特性进行3栏的布局，道理都是一样的。

这篇文章对BFC的前置概念没有过多说明，比如盒模型以及定位方案等，可以查看[juejin.im/post/59b73d…][juejin.im_post_59b73d]这篇文章，本篇文章也部分参考了该文章。

## 参考文献 ##

[developer.mozilla.org/zh-CN/docs/…][developer.mozilla.org_zh-CN_docs] [www.w3.org/TR/CSS21/vi…][www.w3.org_TR_CSS21_vi] [juejin.im/post/59b73d…][juejin.im_post_59b73d]

[zhangzippo.github.io_posts_2019]: https://link.juejin.im?target=http%3A%2F%2Fzhangzippo.github.io%2Fposts%2F2019%2F04%2F28%2F_28%25E7%2590%2586%25E8%25A7%25A3bfc.html
[juejin.im_post_59b73d]: https://juejin.im/post/59b73d5bf265da064618731d
[developer.mozilla.org_zh-CN_docs]: https://link.juejin.im?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FGuide%2FCSS%2FBlock_formatting_context
[www.w3.org_TR_CSS21_vi]: https://link.juejin.im?target=https%3A%2F%2Fwww.w3.org%2FTR%2FCSS21%2Fvisuren.html%23block-formatting