前端布局中有一个经常出现的手段:BFC，从前知识零零碎碎的了解一些，今天专门搜集了这方面的资料，在此总结一下，并给出案例。想要了解BFC，需要有一些预备知识：三种布局手段（标准流、浮动、定位），盒的显示模式display。
1、BFC的定义
Block Formatting Context 块级格式化上下文，属于普通流，我们可以将其看成页面内的一块渲染区域，有着自己的渲染规则，不受其他规则的影响，bfc区域内就像是一个隔离的盒子，内部的元素不影响外部元素。听起来BFC是一个很好的东西，那么如何触发BFC呢？
2、触发BFC规则
并不是任意一个元素都可以被当做BFC，只有当这个元素满足以下任意一个条件的时候，这个元素才会被当做一个BFC。
- body根元素
- 设置浮动(元素的float不包括none)
- 设置定位(position为absoulte或者fixed)
- 行内块显示模式，inline-block
- 设置overflow，即hidden，auto，scroll
- 表格单元格(table-cell,table-caption
- 弹性布局，flex
看这个代码，它满足我们的第1个条件(body根元素)，触发1个BFC，这个BFC区域包含子元素box1234，但是不包括box3中的a和两个p标签，所以box2不是一个BFC区域，因为他不满足上面任意1个条件。
但是如果我们希望box2也是1个BFC区域，满足上面任意一个条件即可。我们可以为.box2设置overflow:hidden或者float；left属性都可以。由此可看出BFC包含其子元素，但不包含其子元素的子元素区域。
那么BFC有什么作用呢？
3、作用
- 解决兄弟盒子外边距塌陷（垂直塌陷），可以看到第一个div元素添加margin-bottom:100px，给下面盒子给margin-top:100px。盒子之间的距离，却还是100px。这是很典型的margin的塌陷，两段margin重叠到了一块，互相影响。这里我们可想到用bfc来解决，将两个子盒子分别放入两个不同的BFC区域。
解决方案：给两个div元素的父元素给overfloe属性，成为两个独立的bfc区域。
- 利用BFC解决包含父子塌陷（当父子盒子在一起，如果子盒子给margin-top，可能将父盒子带下来）。本来应该是外部黄色盒子顶部与黑色盒子的顶部距离为20px，但是由于margin的塌陷问题，导致盒子内部的布局影响到了外部。这个时候，就可以触发BFC，将父盒子变成一个独立的区域，这样在BFC区域内部的任何操作，都不会影响到外部。
解决方案:
3. 当浮动产生影响的时候，可以利用BFC来清除浮动的影响（当未给定高度的父盒子里面的子元素浮动，父盒子会失去原有高度，这时也可为父元素添加overflow属性）
4. bfc也可以阻止前面的盒子被浮动盒子覆盖。
由于浮动的盒子不占据位置，没有设置浮动的元素被覆盖
为后面盒子设置overflow:hidden，后面的盒子成为bfc区域，不受浮动的盒子影响
4、总结
不同的BFC区域之间是相互独立的，互不影响的。利用这个特性我们可以让不同BFC区域之间的布局不产生影响.