一、BFC概念

先看官方定义：BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

不愧是官方定义，看起来就不容易进脑子，下次面试被问到还是会挠头=.=。所以接下来我们先把这个东西拆开来看看，到底是什么神秘力量让它如此不羁。

1.1 拆分

块级：即我们常用的块级元素，eg:div、li、p等

格式化：每种代码都有自己的展现规则，格式化的作用就是把代码变美变漂亮，编程人员阅读起来更舒服。以后台返回的json为例：

{"success":true,"data":{"userid":"1","name":"Jack","mobile":"123456"},"errorMessage":"成功！","code":1}

格式化以后的数据格式应为：

{
    "success": true,
    "data": {
        "userid": "1",
        "name": "Jack",
        "mobile": "123456"
    },
    "errorMessage": "成功！",
    "code": 1
}

所以对于格式化的定义，可以简单地概括为根据制定的具体规则，对内容展示做一些处理，从而达成某些规范，或使内容更加美观合理。

上下文：表示格式化影响的范围，或者作用域。上例中的上下文即为该特定json代码段。

综上所述，我们可以这么理解BFC的概念，在正常的文档流中：

• 在满足一定条件下，一个普通的块级元素，就会变成一个块级格式化上下文
• 在这个上下文范围内，所有的元素排列都会遵循一定的规则，即格式化的规则，进行排列布局。（且针对不同类型的元素会对应不同的规则）。
• 这个范围内的元素不管如何布局都不会影响到上下文外部的元素，也就是一个独立的布局单位。

1.2 创建BFC

一个普通的块级元素满足以下条件中的任意一个即可触发BFC(参考MDN):

• 根元素（html）
• 浮动元素（元素的 float 不是 none）
• 行内块元素（元素的 display 为 inline-block）
• 绝对定位元素（元素的 position 为 absolute 或 fixed）
• 表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）
• 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
• 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
• overflow 计算值(Computed)不为 visible 的块元素
• 多列容器（元素的 column-count 或 column-width (en-US) 不为 auto，包括 column-count 为 1）
• column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中

二、BFC应用场景

2.1 清除元素浮动

如下例子中，因为父元素未设置高度，并且子元素浮动脱离了文档流，所以父元素出现高度塌陷问题(子元素无法撑开父元素的高度)，要解决这个问题，我们可以给父元素设置css属性触发BFC来解决，方式见1.2创建BFC，通常的做法是设置父元素的overflow为非默认的 visible 的值。

HTML

<div class="box">
    <div class="float fl">左浮动元素</div>
    <div class="float fr">右浮动元素</div>
</div>

CSS

.box {
        background-color: #eee;
        border: 5px solid red;
    }

.float {
  width: 200px;
  height: 150px;
  background-color: white;
  border:3px solid black;
  padding: 10px;
}  
.fl {
  float: left;
} 
.fr {
  float: right;
}  

给父元素box添加属性 overflow: hidden; 触发BFC后，浮动的子元素也遵守流布局了：

2.2 外边距合并(重叠)

HTML

<div class="box">
    <div class="item top"></div>
    <div class="item bot"></div>
</div>

CSS

.box {
  	background-color: #eee;
  	border: 5px solid red;
  	overflow: hidden;
}
.item {
  	width: 200px;
  	height: 150px;
  	background: lightblue;
}  
.top {
  	margin-bottom: 50px;
} 
.bot {
  	margin-top: 50px;
} 

要消除外边距合并，可以通过给相邻元素的其中之一，进行一层BFC隔离封装：

<style>
  .item-box {
      overflow: hidden;
  }
 </style>
<div class="box">
    <div class="item top"></div>
    <div class="item-box">
      <div class="item bot"></div>
    </div>
</div>

以上。