BFC一直是刚入门学习前端同学的一个难点，只是知道可以解决margin带来的塌陷问题，但具体什么是BFC就不是很清楚了，只知道这个名字听起来很高级；今天就跟大家分享一下关于BFC的那些事。
一、 什么是 BFC
所谓的 Formatting context(格式化上下文), 它是 W3C CSS2.1 规范中的一个概念。
它是页面中的一块渲染区域，并且有一套渲染规则.它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
而 Block Formatting Contexts (BFC，块级格式化上下文)，就是 一个块级元素 的渲染显示规则。通俗一点讲，可以把 BFC 理解为一个封闭的大盒子，盒子里面的子元素不会受到外面元素的元素同时也不会影响外面的元素。
BFC的布局规则如下：
1、 BFC是页面上的一个隔离的独立容器；2、 内部的盒子会在垂直方向，一个个地放置；3、 属于同一个BFC的 两个相邻盒子的 上下margin会发生重叠 ；4、 计算BFC的高度时，浮动元素也参与计算； 5、 BFC的区域不会与float重叠；6、 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此。
触发 BFC的条件，只要元素满足下面任一条件即可触发 BFC 特性：
浮动元素：float 不为none的属性值；
绝对定位元素：position (absolute、fixed)
display：inline-block、table-cells、flex
overflow 除了visible以外的值 (hidden、auto、scroll)
二 、BFC的特性及应用
上述对BFC有了一个大致的了解，接下来就说一下BFC的特性及应用。
1、 同一个 BFC下,外边距会发生重叠
<style>.box {width:100px;height:50px;margin:50px 0;background-color: #ff3040;}</style><body><div class="box"></div><div class="box"></div></body>
根据BFC规则的第3条：
盒子垂直方向的距离由margin决定，属于 同一个BFC的 + 两个相邻Box的 + 上下margin 会发生重叠。
上文的例子之所以发生外边距重叠，是因为他们同属于 body这个根元素， 所以我们需要让它们不属于同一个BFC，就能避免外边距折叠：
<div class="box"></div><div class="box1"><div class="box"></div></div>.box1 {overflow:hidden;.box {width:100px;height:50px;margin:50px 0;background-color: #ff3040;
2、 BFC可以清除浮动
正常情况下，浮动的元素会脱离普通文档流，所以如下代码：<div style="border: 1px solid #ccc;"><div style="width: 50px; height: 50px; background: #ff3040;float: left;"></div></div>
外层的div会无法包含 内部浮动的div，但如果我们 触发外部容器的BFC，根据BFC规范中的第4条：计算BFC的高度时，浮动元素也参与计算，那么外部div容器就可以包裹着浮动元素，所以只要把代码修改如下：
<div style="border: 1px solid #ccc;overflow: hidden"><div style="width: 100px;height: 100px;background: #ff3040;float: left;"></div></div>
3 、BFC可以阻止元素被浮动元素覆盖
先看一个例子：
<div class="box"></div><div class="box1"></div>div {width:300px;}.box {height: 100px;float: left;background-color: #ff3040;}.box1 {height:200px;background-color: #ccc;}
之所以是这样，是因为上文的规则6： 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；所以要想改变效果，使其互不干扰，就得利用规则6 ：BFC的区域不会与float重叠，让box1也能触发BFC的性质，即：
.box1 {overflow:hidden;height:200px;background-color:#ccc;}
以上就是关于BFC的那些事，欢迎大家留言讨论。