BFC:块级格式化上下文
IFC:行内格式化上下文
实例如下：
<div class="out" style="background: red;">
<div class="in" style="height: 100px; margin-top: 10px; background: green;"></div>
</div>
此时，out和in高度都是100px。
异常情况：但out被in挡住，且顶部有10px间隙。
解决方案：我们给out添加overflow:hidden，out被挡住和10px空白都没有了，但out高度也变为了110px。
刚刚的这种异常情况称为边距重叠，BFC是块级边距重叠，IFC是行内元素的边距重叠。
以上为父子元素的边距重叠，还有两种情况是兄弟元素的边距重叠，空元素的边距重叠。
1. 兄弟元素的边距重叠。兄弟元素相交的位置，margin会取较大值作为两者的边距。
2.空元素的边距问题。空元素设置了不同的上下边距时，会取较大值做他的最终边距。
css在什么情况下会创建出BFC？
float值不是none时
position值不是relative或static时
display为table,table-cell
overflow值为hidden,auto时
css盒模型：BFC、IFC边距重叠解决方案
原文地址：https://www.cnblogs.com/liuxu-xrl/p/9022540.html