BFC又称块状格式化上下文，是css中非常常用的技术，但是有的人只有用他稀里糊涂的解决问题，却不知道其中的原理。今天我们就来扒扒它。
BFC是什么？
首先我们看下官方定义
块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
看着高大上的解释，反而感觉会更蒙了。其实用人话来翻译，就是说BFC是专门生成一个单独区域，它不受外部影响。并且它的内部也不会影响到外部。总之，就是彼此互不打扰。
BFC怎么产生？
BFC产生有很多种。本质上css就三种布局方式，正常的文档流，浮动加定位。而BFC的产生也可以根据这三种文档格式来定。首先，浮动float就可以产生BFC。其次，position：absolute绝对定位。最后，overflow不是visible、clip的块状元素。当然，除了这三种常用的，还有很多需要特殊记忆的种类。例如：flex布局、grid珊格布局、display不是visible就可以。
BFC解决哪些场景？
- BFC可以解决浮动，也就是解决浮动元素让父元素高度坍塌的问题。方案上就是，给父元素开启BFC。这样能被解决是因为计算BFC的高度时，浮动子元素也会被计算。因此，将父容器的高度撑起来了。
- BFC可以解决margin合并。虽然margin本质上是设计如此。但是有的场景就是希望margin距离的非合并的存在。这时候只要给其中一个元素用BFC包裹就行了，这是因为属于同一个BFC的两个相邻的元素margin会发生重叠。
结束语
BFC就像学游泳。开始用的时候就难免会呛水，但是当你学会后，就会发现，你不需要再刻意思考，就在文档流中，如鱼得水。祝大家都能自如驭水。
享受失重，不惧失控。
