BFC是一個獨立的渲染區域，其內部的元素無論怎么擺放，都與外部毫不相干，相當于一個封閉的空間

哪些元素具有BFC的條件呢?

答： display屬性為block，list-item, table的元素。
BFC常用的作用：

觸發BFC：

根元素：html
overflow不為visible（最為常用）
float屬性不為none
position屬性為absolute或fixed
display屬性為inline-block，table-cell，table-caption，flex，inline-flex

BFC的主要用途：

1、清除內部浮動：
平時一個父盒子不設寬高，內容由里面的元素撐起，那么當里面的元素浮動的時候，就無法撐起父元素的高度。
如果父元素觸發了BFC，那么在計算父元素的高度時，也會自動檢測浮動的盒子的高度，就不會出現由于子元素浮動撐不起父元素的高度問題了。

image.png

2、解決外邊距合并問題
平時我們知道兩個盒子間垂直方向的margin距離會發生合并，這時候就可以用到BFC了
當盒子不屬于同一個BFC時，他們的margin就不會發生重疊。

image.png

image.png

3、BFC區域 不會和浮動的盒子產生交集，而是緊貼浮動盒子的邊緣
平時當我們給一個塊級元素設置了浮動，那么下面的盒子就會頂上來，這樣下面的盒子我浮動的元素就有交集了
如果不想讓他們有交集，給下面的盒子觸發了BFC，那么下面的盒子會緊貼浮動盒子的邊緣，他們就不會有交集

image.png