BFC (Block Formatting Context) 是Web頁面的可視化CSS渲染的一部分，它是塊級盒子布局的區域，并且也是浮動元素與其他元素的交互區域。
如何觸發BFC？
以下方式可以創建BFC：
根元素或包含根元素的元素
float的值不為none
overflow的值不為visible
display的值為table-cell, table-caption, inline-block, grid 或 flex
position的值為absolute或fixed
BFC的主要特點：
內部的Box會在垂直方向，一個接一個地放置。
屬于同一個BFC的兩個相鄰的Box的margin會發生重疊。
每個元素的左外邊距與包含塊的左邊界相接觸（從左到右），即使浮動元素也是如此，除非元素創建了一個新的BFC。
BFC的區域不會與浮動元素的box重疊。
計算BFC的高度時，浮動子元素也參與計算。
BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，反之也如此。
如何解決margin塌陷？
margin塌陷，也被稱為margin合并，是當兩個垂直相鄰的元素的margins相遇時，它們會形成一個margin，其大小等于兩個發生重疊的margins的最大值，而不是它們的總和。
使用BFC來解決margin塌陷問題的一些常見方法包括：
1.添加overflow屬性：給父元素設置一個overflow: auto或overflow: hidden可以觸發BFC，從而解決margin塌陷問題。
2.使用浮動：將元素設置為float: left或float: right也會觸發BFC，但這通常不是解決margin塌陷的最佳方法，因為它會導致其他的布局問題。
3.使用內聯塊：將元素的display屬性設置為inline-block也會觸發BFC。
4.使用偽元素：可以添加一個偽元素，并使用clear:both來清除浮動，從而解決margin塌陷問題。
