理解BFC

更好阅读体验移步：http://zhangzippo.github.io/posts/2019/04/28/_28理解bfc.html

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,没有任何其他影响，但是这个属性目前浏览器支持的不是很好，下图是这个值的兼容情况：

display: flow-root兼容情况

影响的范围

这里引用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外部元素的特性。

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>

效果如下：

image.png

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

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

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

image.png

从外到内分别是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的做边缘接触

特性3

特性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上面

浮动盒区域不叠加到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的前置概念没有过多说明，比如盒模型以及定位方案等，可以查看https://juejin.im/post/59b73d5bf265da064618731d这篇文章，本篇文章也部分参考了该文章。

参考文献

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context
https://www.w3.org/TR/CSS21/visuren.html#block-formatting
https://juejin.im/post/59b73d5bf265da064618731d