BFC及其应用

前言

本文包括以下内容：

什么是BFC
如何产生BFC
BFC的特点
应用BFC

1、什么是BFC

BFC （Block formatting contexts）块级格式化上下文，首先看一下 w3c 是如何定义BFC的（大致翻译如下）：

浮动元素，绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow不为 visiable 的块级盒子，都会为他们的内容创建新的块级格式化上下文。

在一个块级格式化上下文中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生合并。

在块级格式化上下文中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘），即使存在浮动也是如此，除非这个盒子创建一个新的块级格式化上下文。

可以这样理解BFC：把BFC看作一个盒子（容器），这个BFC盒子有自己独立的布局方式，一个BFC盒子中的元素布局不受外界影响，也不会影响到外面的元素。且在一个BFC中块盒与行盒都会垂直排列，若存在外边距则会产生外边距合并。

2、如何产生BFC

在怎样的条件下会产生块级格式化上下文，这里引用部分 MDN关于BFC 的内容。

浮动元素
绝对定位的元素 (元素具有position为 absolute或 fixed)
内联块 inline-blocks (元素具有 display: inline-block)
表格单元格、标题(元素具有 display: table-cell、table-caption，HTML表格单元格默认属性)
块元素具有overflow且值不是 visible的

3、BFC的特点

同属一个BFC的内容会发生外边距合并（Margin Collapse），两个外边距大致可以分为下列三种情况：

外边距均为正值，取两者中较大的数
外边距一正一负时，取两者相加
外边距均为负时，取两者中绝对值较大的

BFC不会重叠浮动元素
BFC可以包含浮动

4、应用BFC

解决外边距合并的问题。
同属一个BFC的内容会发生外边距合并，那么，我们可以建立新的BFC，使得它们不属于同一个BFC时则外边距不会发生合并。

外边距合并问题1

先是相邻的兄弟元素外边距合并，需要先给其中的一个盒子加上一个父元素，然后给这个父元素添加overflow:hidden，这一点很重要，可以理解为这个属性是为其中的content新创建一个BFC，所以一开始在创建这个Demo的时候我就有类似这样的疑问：overflow:hidden 能触发BFC，为什么不会阻止垂直外边距叠加？

外边距合并解决1

其实解决外边距合并的方法其实有很多，个人觉得用BFC并不好，且麻烦，需要先创建一个父元素（因为直接给子元素.box2设置overflow： hidden是无效的）。当我尝试使用另外一个方法： display: inline-block创建BFC的时候，发现并不需要创建父元素，外边距会直接合并。

外边距合并解决2

这时候我就遇到了这样一个问题：同样是创建BFC，为什么使用overflow: hidden需要创建父元素，而使用display: inline-block不需要创建父元素呢？
个人理解是这样的：这些应用BFC的属性，为它们的content创建了一个新的独立计算区域（BFC），在这块新的独立计算区域中与外面元素的外边距不产生重叠，而在这块独立计算区域之内仍然是外边距重叠的。

新的独立计算区域

而当使用display: inline-block触发了别的外边距合并的条件（可能是因为 IFC），并非因为BFC而发生合并。在下面的参考文章链接中也有指出那么一点：

inline-block元素不与任何元素的外边距产生折叠

还可以参照下图，可知应该是display: inline-block的问题使得外边距计算直接相加，当我们再使用其它属性，如display: table-cell的时候，仍然需要为这个元素创建父元素div.ct然后应用属性,产生BFC才可以生效，而直接用在相邻元素上是无效的。

外边距合并解决3

实现两栏布局及去除文字环绕效果
当存在两个相邻的div时，它们会垂直排列，但当给第一个元素设置float属性时，则会发生盒子重叠。假设第一个盒子比第二个盒子大（否则覆盖后就看不到第二个盒子）。在这里会首先发现这个文字并不会被浮动元素遮挡（现在是文字较少的情况，仅4个字符），当box1大于box2时，这个文字仍然不会被遮挡而是跑到盒子的右侧或下侧（据box2宽高决定）。

floatBox1+ box2

当文字较多时，所有的文字都会围绕着box1，形成文字环绕效果。而给box2添加overflow:hidden;时则不会再发生文字环绕。这是之前提到的BFC特性当中的一点： * BFC 不会重叠浮动元素 *，当给box2添加属性时，它就产生了新的BFC使得它不会再去重叠浮动的box1
同理，当去除box2的宽度时，即可形成自适应的两栏布局。

去除文字环绕效果
解决因为子元素浮动而带来的父容器高度塌陷问题
当一个父容器中的元素都设置为浮动，且自身没有设置高度时，则父容器的高度就会发生塌陷（就好像没有了子元素一样）。如下图中的 ① 过程。而给父元素设置了overflow: hidden;时则又发生了 ② 过程这样的变化。这是因为这给父容器设置成了一个新的BFC，再结合之前的特性：BFC可以包含浮动可知，就是因为这个BFC的生成使得高度不塌陷。（使用其它属性如display: table-cell也可使得高度不塌陷）

父容器高度塌陷

后记

使用BFC并不是很好的解决方案，像一个外边距合并问题给人带来的困扰就非常大，完全可以使用更简单的方案如给父元素添加透明的border或padding来解决；像是两栏布局以及去除文字环绕效果，也可以通过margin-left来解决，使用overflow: hidden也会产生新的问题，如文字溢出无法显示；最后一个更是可以使用清除浮动（添加.clearfix）来解决父元素高度塌陷。
这里使用BFC 仅仅是为了更好理解它而已 ~

参考文章：

深入理解BFC和Margin Collapse - w3cplus
BFC 神奇背后的原理