版權聲明： https://blog.csdn.net/Ivana_zyf/article/details/78940251
BFC機制與浮動定位脫離文檔流
BFC塊格式化上下文 —-w3c規定的一種獨立渲染區域
渲染流程基本上四個步驟：
1.計算CSS樣式
2.構建Render Tree
3.Layout – 定位、大小，換行，（position, overflow等屬性）
4.正式開始
脫離標準流的方式有三種——浮動、絕對定位、固定定位
脫離標準流之後定位的元素，會覆蓋浮動的元素，故此定位的比浮動的脫離標準流等級高，且在清除脫離標準流帶來的影響中，
浮動的元素，可以被除浮動的方式來解決對父盒子的影響。
但脫離標準流定位的元素，給父盒子造成的影響無法清除。在BFC中，盒子從頂端開始垂直地一個接一個地排列，兩個盒子之間的垂直的間隙是由他們的margin 值所決定的。在一個BFC中，兩個相鄰的塊級盒子的垂直外邊距會產生摺疊。
在BFC中，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對於從右到左的格式來說，則觸碰到右邊緣）。
★★★BFC特性：
1.阻止外邊距重疊
（在CSS當中，相鄰的兩個盒子（可能是兄弟關係也可能是祖先關係）的外邊距可以結合成一個單
獨的外邊距。這種合併外邊距的方式被稱爲摺疊，並且因而所結合成的外邊距稱爲摺疊外邊距。）
2.承載浮動元素
3.阻止元素被浮動 元素覆蓋
★★★會觸發BFC的情況：
1.float（除none）
2.overflow（除visible）
3.display(table-cell,table-caption,inline-block)—非塊級盒子的塊級容器
4.position(absolute,fixed)
★阻止外邊距重疊
產生外邊距摺疊的必備條件：margin鄰接
根據w3c規範，兩個margin是鄰接的必須滿足以下條件：
①沒有空隙、padding、border將他們分隔開。
②必須是處於常規文檔流（非float和絕對定位）的塊級盒子,並且處於同一個BFC當中
③都屬於垂直方向上相鄰的外邊距：
⑴元素的margin-top與其第一個常規文檔流的子元素的margin-top
⑵元素的margin-bottom與其下一個常規文檔流的兄弟元素的margin-top
⑶height爲auto的元素margin-bottom與其最後一個常規文檔流的子元素的margin-bottom
⑷高度爲0最小高度也爲0，不包含常規文檔流的子元素，且自身沒有建立新的BFC的元素的margin-top和margin-bottom以上的條件意味着下列的規則：
①創建了新的BFC的元素與它的子元素的外邊距不會摺疊（上面有創建方法）
③絕對定位元素和inline-block元素不與任何元素的外邊距產生摺疊
④一個常規文檔流元素的margin-top 與其第一個常規文檔流的子元素的margin-top產生摺疊，（父元素不包含 padding 和 border ，子元素不包含 clearance）
⑤ 一個常規文檔流元素的margin-bottom與它下一個常規文檔流的兄弟元素的margin-top會產生摺疊，除非它們之間存在間隙（clearance）。
⑥ 一個 height爲auto、min-height爲0的常規文檔流元素的 margin-bottom 會與其最後一個常規文檔流子元素的margin-bottom 摺疊。
（父元素不包含 padding 和 border，子元素的 margin-bottom 不與包含 clearance 的 margin-top 摺疊。）
⑦ 一個不包含border或者padding的top、bottom屬性的常規文檔流元素，並且其 height爲 0 或 auto，min-height爲0，而且裏面也不包含行盒(line box)，其自身的 margin-top 和 margin-bottom 會摺疊
參考：
https://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html