BFC 块级格式化上下文

在解释BFC之前，先说一下文档流。

我们常说的文档流其实分为定位流、浮动流和普通流三种，而普通流其实就是指BFC中的FC。

FC是formatting context的首字母缩写，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。常见的FC有：BFC、IFC，还有 GFC 和 FFC。

BFC（ block formatting context ），译为：块级格式化上下文，是用于布局块级盒子的一块渲染区域。也就是说，它是一个独立的渲染区域，规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。

触发条件

满足下列条件之一，就可触发BFC

• 根元素，即HTML元素
• float的值不为none
• overflow的值不为visible
• display的值为inline-block、table-cell、table-caption
• position的值为absolute或fixed

[ BFC 元素所具有的特性 ]BFC布局规则特性：

• 在BFC中，盒子从顶端开始垂直的一个接一个的排列；
• 盒子垂直方向的距离由margin决定；属于同一个BFC的两个相邻盒子会发生重叠（塌陷）；
• 在BFC中，每个盒子的左外边缘（margin-left）会触碰到容器的左边缘（border-left）;     // 从右到左的格式，同理
• BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘；
• 计算BFC的高度时，自然也会检测到浮动的盒子高度；

BFC 的主要用途

BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。

它与普通的块框类似，但不同之处在于:

• 清除内部浮动：可以阻止元素被浮动元素覆盖；可以包含浮动元素。

只要把父元素设为BFC就可以清除子元素的浮动了，最常用的方式就是在父元素上设置overflow:hidden;
对于IE6加上zoom:1;就可以了。

• 解决外边距合并问题：属于同一个BFC的两个相邻块级子元素的上下margin会发生重叠。

// 设置writing-mode:tb-rl时，水平margin会发生重叠

所以，当两个相邻块级子元素分属于不同的BFC时可以阻止margin重叠。

• 制作右侧自适应的盒子问题：BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘

所以，普通流体元素BFC后，为了和浮动元素不产生任何交集，会顺着浮动边缘形成自己的封闭上下文