簡介：什么是BFC？
BFC(Block Formatting Context)的英文縮寫簡稱，block可以理解為一個簡單的盒模型， Formatting Context則為block的上下文渲染環境。其作用是使內部元素的布局不受外部元素影響。
BFC的觸發條件：
- 根元素,也就是html根標簽；
- position：fixed/absoluted;
- float屬性值不是none的；
- overflow屬性值不是visible的；
- display屬性值：inline-display/table-cell/table-caption/flex/inline-flex;
BFC作用：
- bfc內部元素的布局不受外部元素影響。
- bfc區域不會出現margin重疊
- bfc區域計算高度時候會自動計算浮動元素。
- bfc區域不會和浮動元素重合。
BFC的場景應用：
- 防止margin出現重疊：
這里可以很明顯的看到div1的margin是生效了的，但是div2的margin在於1相鄰的部分是沒有起到作用的
在這里我們在div2外部套上一個div，並添加overflow：hidden屬性，使其成為一個bfc區域，這樣div2的margin也就生效了。
- 兩欄布局，防止出現文字環繞效果：
在這里可以看到當div1設置為浮動后，會浮動在div2的上面，看起來像是div1被div2環繞包裹起來的感覺；
為div2添加一個包裹div並設置overflow屬性，使其成為一個BFC區域，這樣就可以避免出現文字環繞效果，並且可以實現自動實現兩欄布局效果。
- 清除浮動，防止元素塌陷：
這個很好理解就是我們在頁面布局的時候，如果不給父元素設置一個高度的話，子元素設置浮動后，子元素並不能將父元素的高度自動撐起來，這個時候給父元素設置一個overflow：hidden屬性后，就可以起到清除浮動的作用。