【前端每日一题】什么是BFC？垂直margin重叠是为什么？

秋招马上就要开始了，小伙伴们最近在准备面试的东西没呢，知了姐今天将蛋糕哥整理的前端面试题共享出来，同时给出参考的答案，如果有更好的解答欢迎留言。

【今日面试题】什么是BFC？垂直margin重叠是为什么？怎么解决这个问题？

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

通俗的来说：BFC是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子内部的元素无论如何翻江倒海，都不会影响到外部。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。比如清除浮动）并且在一个BFC中，块元素与行元素都会垂直的沿着其父元素的边框排列。

如何触发 BFC

1.浮动元素，float 除 none 以外的值

2.position的值不为static或者relative

3.display不为none

4.overflow 除了 visible 以外的值

BFC的应用

1.解决浮动塌陷问题

2.自适应两栏布局（我们还可以运用BFC可以阻止元素被浮动元素覆盖的特性来实现自适应两栏布局。方法：给没有浮动的元素加overflow：hidden。）

3.解决设置margin值重叠问题。

总结：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。它规定了元素与其他元素的关系和相互作用。

你会了吗，更多前端学习干货，欢迎关注公众号。