邊界重疊是指兩個或多個盒子(可能相鄰也可能巢狀)的相鄰邊界(其間沒有任何非空內容、補白、邊框)重合在一起而形成乙個單一邊界。
兩個或多個塊級盒子的垂直相鄰邊界會重合，它們的邊界寬度是相鄰邊界寬度中的最大值。注意水平邊界是不會重合的。
父子元素的邊界重疊
而實際上效果如下
在這裡父元素的高度不是110px，而是100px，在這裡發生了高度坍塌。原因是如果塊元素的 margin-top 與它的第乙個子元素的margin-top 之間沒有 border、padding、inline content、 clearance 來分隔，或者塊元素的 margin-bottom 與它的最後乙個子元素的margin-bottom 之間沒有 border、padding、inline content、height、min-height、 max-height 分隔，那麼外邊距會塌陷。子元素多餘的外邊距會被父元素的外邊距截斷。
兄弟元素的邊界重疊
可以看到1和2,2和3之間的間距不是50px，發生了邊距重疊是取了它們之間的最大值30px。
空元素的邊界重疊
假設有乙個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發生合併：
解決上述問題的其中乙個辦法就是建立bfc。bfc的全稱為block formatting context，即塊級格式化上下文。乙個bfc有如下特性：
建立bfc的方法如下：
防止垂直margin重疊：
父子元素的邊界重疊得解決方案：
在父元素上加上overflow:hidden;使其成為bfc。
兄弟元素的邊界重疊，在第二個子元素建立乙個bfc上下文：
清除內部浮動
我是浮動元素
#float左
右
解決方案為給右側元素建立乙個bfc，原理是bfc不會與float元素發生重疊。
BFC邊距重疊解決方案
bfc 定義 bfc block formatting context 直譯為 塊級格式化上下文 它是乙個獨立的渲染區域，只有block level box參與，它規定了內部的block level box如何布局，並且與這個區域外部毫不相干。bfc布局規則 原理 內部的box會在垂直方向，乙個接乙...
margin塌陷（又叫邊距重疊效應） BFC
問題 有時當我們設定子元素的margin top，但是卻發現子元素沒有出現上外邊距的效果，反而是父元素出現了上外邊距的效果。第乙個子元素設定margin top父元素會跟著移動 原因 邊距重疊 乙個盒子和其子孫的邊距重疊。根據規範，乙個盒子如果沒有上補白和上邊框，那麼它的上邊距應該和其文件流中的第乙...
邊距重疊問題
1 在布局的時候會碰見子元素設定邊距影響父元素的情況，對已經布局好的介面產生影響。parent child 正常情況下 當給child類新增margin 20px 屬性之後，檢視變成 父元素同時也margin影響 解決方法 1 給父元素設定邊框 border 1px solid ccc 2 給父元素...