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

 

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

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

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

 

css在什么状况下会建立出BFC？

float值不是none时
position值不是relative或static时
display为table,table-cell
overflow值为hidden,auto时