BFC

[youyuxun]

BFC

BFC，块格式化上下文文（block formatting context），在面试中经常会碰到这个问题。在这里总结归纳下。

###定义
BFC是在页面渲染时，块级盒布局出现的区域，同时也是浮动元素交互的区域。这样讲其实很晦涩，不妨这样理解：
在一个文档中，如果所有元素都处于文档流中，那他们都属于同一个BFC，可以说它是环境或者属性。但是不代表一个文档里只有一个BFC。

###激活BFC的条件
激活BFC的条件有很多，总结如下：

1. float属性为left或right；
2. position属性为absolute或fixed;
3. 块容器但不是块级盒模型的元素，简单来说就是display属性为inline-block、table-cell、table-caption、flex或inline-flex；
4. overflow属性为auto、scroll或hidden

###BFC的作用
在BFC的布局中，box会紧贴着BFC的左边缘，自上向下排列，即使存在浮动元素，这样就会出现浮动元素覆盖在box上的情况。
利用BFC，我们可以解决很多问题：

1. 同属于一个BFC时，box垂直方向的距离会由各自的margin值决定，也就是会发生合并情况。解决方法就是将box置于不同的BFC中，这样margin值会分开计算，不会合并

2. 在BFC中若有浮动元素，就会出现类似文字环绕的情况。这时只要为被覆盖的元素设置一个新的BFC即可解决问题

3. 高度的塌陷。在一个BFC中，若都为浮动元素，则父元素的高度会塌陷，这时我们就需要为父元素设置BFC，就是常说的清除浮动。关于清除浮动的最佳实践如下：

   .clearfix:before,
   .clearfix:after {
   content: '';
   display: table
   }
   .clearfix:after{
   clear: both
   }