时常会在一些技术社区刷到前端面试内容，很多大公司都热衷于去问 BFC 相关概念。
那么究竟什么是 BFC，它有哪些规则，原理又是怎样？不着急，我们一步步深入了解。
一、什么是 BFC
W3C对BFC的定义如下：
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
一个环境中的元素不会影响到其它环境中的布局。
为了让我们有个感性的认识，举个不太合适的例子：
你可以把一个页面想象成大的集装箱，这个集装箱里装的货物就是HTML元素。在现实生活中为了避免不同人的货物相互混淆，都是把货物打好包装再装入集装箱，这样的话无论你包装里面的货物怎么摆放，都不会影响到其他人的货物。
二、具体规则
一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：
1.float的值不是none
2.position的值不是static或者relative
3.display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4.overflow的值不是visible
三、BFC 原理
当你一口气说完上面那几种情况后，面试官阴下脸，BFC 的原理是什么？
这是个有意思的问题，W3C上只列举了这几种情况，我们可以把它归为布局常识。
然而，这么多条目，并不好记。这就需要我们深入理解原理，这样按照场景化记忆，就不用再死记硬背了。
1.BFC 可以包含浮动的元素（清除浮动）
浮动元素是会脱离文档流的(绝对定位元素会脱离文档流)。如果一个没有高度或者height是auto的容器的子元素是浮动元素，则该容器的高度是不会被撑开的。
我们通常会利用伪元素(:after或者:before)来解决这个问题。
如果了解 BFC，那么这个问题就迎刃而解了。
2.BFC 可以阻止元素被浮动元素覆盖
如上图所示，对于浮动元素，可能会造成文字环绕的情况(Figure1)，但这并不是我们想要的布局(Figure2才是想要的)。
要解决这个问题，我们可以用外边距，但也可以用 BFC。
3.避免外边距折叠
BFC可能造成外边距折叠，也可以利用它来避免这种情况。BFC产生外边距折叠要满足一个条件：两个相邻元素要处于同一个BFC中。
所以，若两个相邻元素在不同的BFC中，就能避免外边距折叠。
四、总结
按照上文所说，我们来总结一下 BFC 的这几种情况，大概分为两类：
1.对容器布局有影响，脱离文档流类
float，position，display
display 改变容器类：flex，grid，inline-block，table-cell 等
2.滚动区域、占位隐藏
overflow 不为 visible 情况，其实就是 scroll、hidden、auto之类会形成 BFC。
1.
2.
3.
閱讀更多 F2EAwesome 的文章
