display: -webkit-box;什么意思_大公司面试前端，为什么喜欢问 BFC？

时常会在一些技术社区刷到前端面试内容，很多大公司都热衷于去问 BFC 相关概念。

那么究竟什么是 BFC，它有哪些规则，原理又是怎样？不着急，我们一步步深入了解。

一、什么是 BFC

W3C对BFC的定义如下：

浮动元素和绝对定位元素，非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions)，以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC(块级格式上下文)。

一个环境中的元素不会影响到其它环境中的布局。

为了让我们有个感性的认识，举个不太合适的例子：

你可以把一个页面想象成大的集装箱，这个集装箱里装的货物就是HTML元素。在现实生活中为了避免不同人的货物相互混淆，都是把货物打好包装再装入集装箱，这样的话无论你包装里面的货物怎么摆放，都不会影响到其他人的货物。