bfc定義：
bfc(block formatting context)直譯為"塊級格式化上下文"。
它是乙個獨立的渲染區域，只有block-level box參與，
它規定了內部的block-level box如何布局，並且與這個區域外部毫不相干。
bfc布局規則特性：
在bfc中 ， 盒子從頂端開始垂直的乙個接乙個排列
盒子垂直方向的距離有margin決定，屬於同乙個bfc的兩個相鄰的盒子發生重疊
在bfc中，每個盒子的左外邊距（margin-left）會觸碰到容器的左邊緣（border-left）
bfc的區域不會與浮動盒子重疊，而是緊貼浮動邊緣。
浮動的元素會被父級計算高度（父級觸發了bfc）
計算bfc的高度時，其浮動子元素元素也參與計算
bfc觸發條件：
float屬性不為none
position為absolute或fixed
display為inline-block, table-cell, table-caption, flex, inline-flex
overflow不為visible
bfc用途：
清除浮動
解決 外邊距合併 問題 （讓兩個盒子不屬於同乙個bfc）
右側盒子自適應
外邊距合併:（ 注： 只有普通文件流中塊框的垂直外邊距才會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合併 ）
當上下相鄰的兩個塊元素相遇時， 如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，
則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者。這種現象被稱為相鄰塊元素垂直外邊距的合併（也稱外邊距塌陷)
解決方法：
1. (盒子垂直方向的距離有margin決定，屬於同乙個bfc的兩個相鄰的盒子發生重疊) ==> 通過巢狀 讓兩個 內容區域 不屬於同乙個 盒子
2. 脫離普通文件流
3.最好避免
對於兩個巢狀關係的塊元素，如果父元素沒有上內邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發生合併，
合併後的外邊距為兩者中的較大者，即使父元素的上外邊距為0，也會發生合併。
解決方法：
可以為父元素定義1畫素的上邊框或上內邊距。
可以為父元素新增overflow:hidden。
外邊距合併（外邊距塌陷）
使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合併。當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin bottom，下面的元素有上外邊距margin top，則他們之間的垂直間距不是margin bottom與margin top之和，而是兩者中的較大者。這種現象被稱...
外邊距塌陷 外邊距合併
1.父子塊級 元素外邊距塌陷 子元素加margin top,父元素也加margin top,如果父元素沒有設定margin top,那預設0,取的是其中最大 的值,這個效果作用父元素身上啦 原因 他倆共用乙個外邊距 解決 方法一 給父元素加 border padding 方法二 給父元素加overf...
外邊距合併
從3個簡單的小例子來看外邊距合併 給h1加50px的margin，但實際上h1和div的margin合併在一起了 detail設定margin為30px,header設定margin為30px，結果兩個相鄰元素之間的間距發生了合併 而且合併寬度是margin數值大的為準。如下圖detail和head...