1.什么是BFC
BFC即Block Formatting Contexts（塊級格式化上下文），是W3C CSS2.1規范中的一個概念。BFC是指瀏覽器中創建了一個獨立的渲染區域，并且擁有一套渲染規則，它決定了其子元素如何定位，以及與其他元素的相互關系和作用。簡單來說，BFC就是一個完全獨立的空間（布局環境），讓空間里的子元素不會影響到外面的布局。
BFC具有以下特點：
- BFC內部的Box會在垂直方向一個接一個地放置。
- Box垂直方向的距離由margin決定，屬于同一個BFC的兩個相鄰Box的margin會發生重疊。
- 從左往右的格式化，包括浮動。
- BFC是一個隔離的獨立容器，容器里面的元素不會在布局上影響到外面的元素。反之也如此。
- 計算BFC的高度時，浮動元素也參與計算。
具有BFC特性的元素可以看作是隔離了的獨立容器，通俗一點來講，可以把BFC理解為一個封閉的大箱子，箱子內部的元素無論如何翻江倒海，都不會影響到外部。
在布局中BFC的應用場景包括：
- 清除盒子垂直方向上外邊距合并：根據屬于同一個BFC的兩個相鄰盒子垂直方向的margin會發生重疊的性質，可以給其中一個盒子再包裹一個盒子父元素，并觸發其BFC功能（例如添加overflow:hidden），這樣垂直方向的兩個盒子就不在同一個BFC中了，因此也不會發生垂直外邊距合并的問題了。
- 在子元素設置成浮動元素的時候，會產生父元素高度塌陷的問題。解決方法是給父元素設置overflow:hidden，這樣會產生BFC。
要觸發BFC（Block Formatting Context），可以采取以下幾種方法：
- 將元素的display屬性設置為block、table或flex。這些類型的元素會自動創建BFC。
- 將元素的overflow屬性設置為auto、scroll或hidden。這些屬性可以觸發BFC。
- 將元素的position屬性設置為relative、absolute或fixed。這些屬性也可以觸發BFC。
- 將元素的float屬性設置為left、right或none。設置float屬性可以觸發BFC。
- 不同瀏覽器有不同規則
)
