解決方案
這裡針對父子元素的外邊距重疊現象：父元素與第乙個子元素的上外邊距發生重疊。例如：
外邊距重疊參考文件：
當父元素未設定高度時，將所有子元素設定為浮動，便會導致父元素出現高度塌陷。例如：（省略html）
注意：加上邊框是為了使元素高度塌陷問題更清楚。
利用偽元素::before、::after給父元素增加空的css table，利用::before的table使父子元素外邊距隔開不發生重疊，而::after的table由於是塊級表，因此對其清除浮動可以解決父元素高度塌陷問題。
這樣，只要給需要解決外邊距重疊或/和元素高度塌陷問題的元素加上clearfix類屬性就行了。
::before參考文件：
::after參考文件：
塊級表參考文件：
清除浮動參考文件：
外邊距重疊 css冷知識
外邊距重疊就是 margin collapse。相鄰的兩個盒子 可能是兄弟關係也可能是祖先關係 的外邊距可以結合成乙個單獨的外邊距。這種合併外邊距的方式被稱為摺疊，結合而成的外邊距稱為摺疊外邊距 摺疊結果遵循下列計算規則 兩個相鄰的外邊距都是正數時，摺疊結果是它們兩者之間較大的值 兩個相鄰的外邊距都...
CSS外邊距重疊及防止方法
邊界重疊 是指兩個或多個盒子 父子或者兄弟之間 的相鄰邊界重合在一起而形成乙個單一邊界。不會發生重疊的情況 1 水平邊距不會發生重疊 2 相鄰的盒模型中，如果其中乙個是float，垂直margin不會重疊，並且浮動的盒模型和它的子元素之間也一樣 3 設定overflow 屬性的元素和它的子元素之間不...
CSS之外邊距的重疊問題
垂直外邊距的重疊 相鄰的垂直方向的外邊距會發生重疊現象 兄弟元素 兄弟元素之間的相鄰垂直方向的外邊距會取兩者之間的最大值 特殊情況 一正一負,取兩者和 都為負,取絕對值最大的一邊 父子元素 父子元素間的相鄰外邊距,子元素的會傳遞給父元素 上外邊距 父子元素的外邊距的重疊會影響頁面的布局,需要進行處理...