出現margin重疊的原因: 同乙個bfc裡面兩個塊級元素會出現margin摺疊。
解決方式：讓兩個塊級元素不在乙個bfc內。
預設情況，子元素設定margin-top或者margin-bottom會影響其父元素，這就是所謂的margin穿透。解決方式：1.給父元素加個border; 2.將父元素變成bfc。
bfc: block formatting context 簡稱 塊級格式化上下文bfc的特點: bfc是乙個絕對的獨立空間，它的內部元素是不會影響到外部元素的!!!
bfc布局規則:
內部的box會在垂直方向，按照從上到下的方式逐個排列。
box垂直方向的距離由margin決定。屬於同乙個bfc的兩個相鄰box的margin會發生重疊
每個元素的margin box的左邊，與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此
bfc的區域不會與float box重疊
bfc就是頁面上的乙個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此
計算bfc的高度時，浮動元素的高度也參與計算
元素首先需要是乙個block元素，才能變成bfc；
觸發bfc的條件:
因此通過將其中乙個元素display屬性設定為inline-block，width設定為100%是比較好的解決方式；既解決了margin穿透問題，又達到與display為block一樣的效果。
延伸:與bfc對應的另外乙個概念ifc(inline formatting context) 行內格式化上下文
margin重疊問題
寬高100，底外距50 寬高100，上外距20 a c.d 當div.c標籤無內容時 d標籤的上邊距消失了 div.c有內容時 d標籤上邊距顯示 當有div巢狀，且外層div無內容，此時內層div的margin會消失，解決辦法有6種 1.外層c標籤 overflow hidden padding t...
忽略的問題 margin重疊
1.margin同向重疊。問題描述 解決方法 e.給內層div們設定float屬性 記得最後閉合浮動或者清除浮動 2.margin異向重疊 問題描述 依舊如上圖，first和second盒子都有margin 10px，但是顯示出來兩個盒子的距離卻不是20px，而仍然是10px。也就是說此時上面盒子的...
margin 重疊問題的理解
塊級元素的上外邊距 margin top 與下外邊距 margin bottom 有時會合併為單個外邊距，這樣的現象稱為 margin合 並 產生摺疊的必備條件 margin必須是鄰接的 而根據w3c規範，兩個margin是鄰接的必須滿足以下條件 必須是處於常規文件流 非float和絕對定位 的塊級...