BFC

1. 面试题—双边距（边距重叠）

1. 什么是边距重叠？
2. 什么情况下会发生边距重叠？
3. 如何解决边距重叠？
   **边距重叠**： 两个box如果都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。

有两种边距重叠的情况：

1. 父子关系的边距重叠

父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距

给父元素添加 overflow：hidden
这样父元素就变为 BFC，不会随子元素产生外边距

<style>
.out {
background-color: #f00;
width: 200px;
height: 200px;
}

.inner{
margin-top: 50px;
width: 100px;
height: 100px;
background-color: blue;
}   
</style>
<div class="out">
    <div class="inner"></article>
</div>

2.同级兄弟关系的重叠：

同级元素在垂直方向上外边距会出现重叠情况，最后外边距的大小取两者绝对值大的那个

可通过添加空元素或伪类元素，设置overflow:hidden;解决margin重叠问题

2. 回答边距重叠—BFC

什么是BFC？

BFC就是块级格式化上下文的意思，BFC是一块独立的布局环境，保护其中内部元素不收外部影响，也不影响外部。本身BFC是一种css的布局方式，只是我们可以利用它来解决外边距折叠的问题，BFC并不是专门用来解决这个问题而创的；

如何触发BFC？
在box属性值为这些的情况下，都会让所属的box产生BFC。

• overflow: auto/ hidden;
• position: absolute/ fixed;
• float: left/ right;
• display: inline-block/ table-cell/ table-caption/ flex/ inline-flex

也可以用排除法：

overflow的值不是visible；
position的值不是static或relative
float的值不是none
display的值是inline-block 或 table-cell 或 flex 或 table-caption 或
inline-flex