[js] 面试 什么是BFC？垂直margin重叠是为什么？怎么解决这个问题？

BFC全称Block Formatting Context ，中文意思为块级格式上下文。

通俗的来说：BFC是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子内部的元素无论如何翻江倒海，都不会影响到外部。

转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。比如清除浮动）并且在一个BFC中，块元素与行元素都会垂直的沿着其父元素的边框排列。

如何触发 BFC

• 浮动元素:float值除none以外的值
• 绝对定位元素:position为absolute或fixed
• display为inline-block、flex、table-cell、inline-flex、table-caption
• overflow除了visible以外的值（hidden、auto、scroll）
• body根元素

BFC的应用

1. 解决浮动塌陷问题
2. 解决设置margin值重叠问题。
   给它们添加一个父级然后给父级使用bfc

哪些外边距不重叠的情况？

1）水平margin永远不会重合

2）给父元素设置overflow属性(visible除外)，这样父元素和它的子元素之间的垂直margin不会重叠

3）给父元素设置绝对定位（position:absolute），这样父元素和它的子元素之间的垂直margin不会重叠

4）给父元素设置display:inline-block，这样父元素和它的子元素之间的垂直margin不会重叠

5）根元素(如HTML)与body的margin不会重叠

---