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時