margin重疊與穿透問題

margin重疊是指兩個同級元素之間。margin穿透指的是，子元素margin超出父元素而未被父元素包含的現象。

出現margin重疊的原因: 同一個BFC里面兩個塊級元素會出現margin折疊。

解決方式：讓兩個塊級元素不在一個BFC內。

默認情況，子元素設置margin-top或者margin-bottom會影響其父元素，這就是所謂的margin穿透。解決方式：1.給父元素加個border; 2.將父元素變成BFC。

BFC: Block Formatting Context 簡稱 塊級格式化上下文

BFC的特點: BFC是一個絕對的獨立空間，它的內部元素是不會影響到外部元素的!!!

BFC布局規則:

1. 內部的Box會在垂直方向，按照從上到下的方式逐個排列。
2. Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
3. 每個元素的margin box的左邊，與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此
4. BFC的區域不會與float box重疊
5. BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此
6. 計算BFC的高度時，浮動元素的高度也參與計算

元素首先需要是一個block元素，才能變成BFC；

觸發BFC的條件:

• 根元素，body
• float的值不為none
• overflow不為visible；可以是hidden或auto或scroll
• display的值設置為inline-block，flex或者inline-flex,table-cell,table-caption或者inline-table
• position的值設置為absolute、fixed

因此通過將其中一個元素display屬性設置為inline-block，width設置為100%是比較好的解決方式；既解決了margin穿透問題，又達到與display為block一樣的效果。

延伸:

與BFC對應的另外一個概念IFC(inline formatting context) 行內格式化上下文