【前端面试题】前端中的两个外边距bug以及什么是BFC

外边距合并问题

兄弟组件中，如果一个设置margin-bottom，另一个设置margin-top，会导致外边距出现合并的问题，例如box1设置下边距50px，box2设置上边距20px，那么二者之间的外边距进行合并取最大值，所以二者之间相距只有50px。

解决办法：

给两个兄弟组件加一个父组件，让父组件开启flex布局

.father{
display:flex;

flex-direction:column;
}

外边距塌陷问题

父子组件中，子组件设置margin-top会导致父组件掉下来

解决办法：

第一种方法：父组件开启flex布局

第二种方法：父组件设置 overflow:hidden

设置overflow:hidden即设置文本溢出隐藏，创建一个BFC，格式化上下文。

面试题：什么是BFC?

BFC又叫格式化上下文，创建一个独立的区域，不受父级的影响也不受子级的影响。