css盒模型：BFC、IFC边距重叠解决方案

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是行内元素的边距重叠。

 

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

 

以上为父子元素的边距重叠，还有两种情况是兄弟元素的边距重叠，空元素的边距重叠。

1. 兄弟元素的边距重叠。兄弟元素相交的位置，margin会取较大值作为两者的边距。

2.空元素的边距问题。空元素设置了不同的上下边距时，会取较大值做他的最终边距。

 

css在什么情况下会创建出BFC？

float值不是none时
position值不是relative或static时
display的值是inline-block、table-cell、flex、table-caption或者inline-flex
overflow的值不是visible（取auto，或hidden）