【前端面试题】前端中的两个外边距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又叫格式化上下文,创建一个独立的区域,不受父级的影响也不受子级的影响。