margin塌陷（又叫邊距重疊效應） BFC

問題：有時當我們設定子元素的margin-top，但是卻發現子元素沒有出現上外邊距的效果，反而是父元素出現了上外邊距的效果。第乙個子元素設定margin-top父元素會跟著移動

原因：邊距重疊：乙個盒子和其子孫的邊距重疊。根據規範，乙個盒子如果沒有上補白和上邊框，那麼它的上邊距應該和其文件流中的第乙個孩子元素的上邊距重疊。

發生這一現象的有三種情況：

相鄰兄弟塊元素間、

父元素及其首子元素和末子元素間（沒有內邊距或邊框把外邊距分隔開）、

空塊級元素自身的合併。

解決方法：

1、為父元素設定padding。---要設定padding，設定margin不行

2、為父元素設定border。---設定border為0px不行，border要有值

3、為父元素設定 overflow: hidden 。

4、父級或子元素使用浮動或者絕對定位absolute

補充：普通文件流盒子間，只要垂直外邊距直接接觸就會發生合併，合併後外邊距視覺高度取兩個發生合併外邊距中較大者。

父元素的第乙個子元素的上邊距margin-top如果碰不到有效的border或者padding.就會不斷一層一層的找自己「領導」(父元素，祖先元素)的麻煩。只要給領導設定個有效的 border或者padding就可以有效的管制這個目無領導的margin防止它越級。

同乙個bfc中的box會發生margin坍塌（也叫margin重疊）現象，這裡注意，說的是上下margin。

所以不同bfc的box不會發生margin坍塌現象。

在父子級巢狀中，若父級沒有border/padding-top，也沒有空標籤清浮動，總而言之就是沒有觸發bfc的時候，此時只給自己設定margin-top,會傳遞給父級。為了避免margin坍塌現象，就要通過各種方式觸發bfc。

觸發bfc的幾種方式：

1.overflow:hidden/auto/scroll;

2.position不是static也不是relative；

3.float不是none；

4.display是table-cell或inline.

什麼是bfc:

bfc全稱是block formatting context，即塊格式化上下文。它是css2.1規範定義的，關於css渲染定位的乙個概念。

bfc是頁面css 視覺渲染的一部分，用於決定塊盒子的布局及浮動相互影響範圍的乙個區域。

bfc的乙個最重要的效果是，讓處於bfc內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。

利用bfc可以閉合浮動，防止與浮動元素重疊。