BFC
年前，正巧一次面试中被问到涉及到BFC概念，当然偶回答：不知道。但其实大家平时的开发中，却时刻在利用BFC特性在处理样式问题。
下面来看下：
BFC又称BlockFormattingContext（块状格式化上下文）
MDN解释：
AblockformattingcontextisapartofavisualCSSrenderingofawebpage.It’stheregioninwhichthelayoutofblockboxesoccursandinwhichfloatsinteractwithotherelements.
好吧，偶看了这段解释也是似懂非懂。
大概意思是：BFC是CSS渲染页面环节中的一部分。在块级盒子布局的范围中出现，并且它也影响着浮动元素和其他元素。
哪些方式会创建BFC？
通过以下方式，能创建一个BFC规范的布局（根据偶熟悉的程度简单划分几类，如下）：
平时常用
- 根元素是html
- 设置float的元素（脱离文档流）
- position:absolute|fixed（脱离文档流）
- block元素设置overflow（非visible，内容不被加工处理，直接显示）
- display:inline-block
- display:flex|inline-flex
- display:grid|inline-grid
不常用（table系）
- display:table-cell（table单元格cell默认为此样式）
- display:table-caption（tablecaption默认为此样式）
- display:table,table-row,table-row-group,table-header-group,table-footer-group
不常用
- display:flow-root
- 设置contain:layout,content,paint的元素
- column-countorcolumn-width不为auto的元素（包括column-count:1）
- column-span:all
实际应用举例（摘自MDN）
通过几个例子，感性的理解下BFC在实际场景中的作用：
margin塌陷
首先大家知道当在相邻的块级元素的margin会发生合并现象（称为：外边距折叠）
通常会发生在：相邻元素，父子元素margin接触处，或者一个空的块级元素。
注意到两个div之间的margin边距合并成了一个。
怎么解决？
为目标元素外新建一个父元素，并设置overflow:hidden属性。
大家知道hidden会裁剪内容（而不是visiable），则父元素中的元素“们”的margin将“尽情释放”在父元素中。
能看到margin的上下边距被控制在新的父元素中了。
当然偶想说：你也可以将当前元素设置为inline-block触发BFC，只要符合规范都是可行的。
浮动元素丢失高度
大家知道设置浮动float属性的元素将脱离文档流，那么包裹浮动的父级元素的高度为其中非浮动的元素，甚至直接高度“塌陷”。
解决方式也很简单，参考上面的margin边距合并问题：大家也可以设置overflow来解决。
也可以设置display:flow-root;。
总结
简单讲了下css中BFC的概念。
并且通过几个例子示范了如何处理元素间的常见问题（margin边距合并、浮动高度丢失）。
当知道了BFC对元素之间的影响后，就能在页面布局中更好的隔离，或者处理元素间的关系。
本文摘自偶的文章《前端面试中的BFC规范》
如果觉得不错，「前端雨爸」，让大家一同在前端路上成长进步。