一、什麼是BFC呢？
- BFC 即 Block Formatting Contexts (塊級格式化上下文)
自譯： 如果BFC的盒子相當於985,211的高校，普通的盒子就是普通的大學
二、BFC的觸發條件有哪些？
- 根元素（html標籤就是一個BFC）
- float的值不爲none時
- overflow的值不爲visibility
- display的值爲 line-block/table-cell/table-caption/flex/inline-flex
- position的值爲absolute或者fixed
三、BFC的一些特性
- Box垂直方向的距離由margin決定，屬於同一個BFC的兩個相鄰box的margin會發生重疊
<style type="text/css">
.box1{width: 200px;height: 200px;margin-bottom: 50px;background: pink;}
.box2{width: 200px;height: 200px;margin-top: 50px;background: blue;}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
box1和box2都在HTML的BFC下，所以會發生重疊。
重疊以後，想要不重疊可以給box2添加一個父元素，並且添加overflow：hidden，那麼這個父元素就是BFC了，就不繼續在同一個BFC中了，也就不會發生重疊。
- 計算BFC高度時，浮動元素也參與計算
應用： 使用overflow等方法可以解決浮動元素高度塌陷問題
給浮動元素的父盒子添加了overflow:hidden;之後就變成了BFC，BFC在計算高度時，浮動元素也會參與計算。 - BFC的區域不會與float的區域發生重疊
應用： 可以實現自適應兩欄佈局或者三欄佈局（聖盃佈局和雙飛翼佈局）
上面的一個元素浮動，下面的一個元素沒有浮動，那麼會發生重疊，原因是因爲浮動之後不佔據位置，所以後面的元素會上去。
<style type="text/css">
body{margin: 0; padding: 0;}
.left{width: 300px;height: 300px; background: red;float: left;}
.right{height: 600px; background: yellow;}
</style>
</head>
<body>
<div class="left">1</div>
<div class="right">2</div>
</body>
當給下面的元素添加了float/overflow/display的時候就不重疊了，原因是因爲給了這些聲明之後，就觸發的下面的元素爲BFC，而BFC裏面規定了，BFC區域不會與浮動盒子發生重疊。
既要BFC的區域不會與float的box重疊，又要右邊的容器自適應。
- overflow:hidden/auto/scroll;
- display:flex/inline-flex;
- BFC內部的Box會在垂直方向，一個接一個的放置。
![在這裏插入圖片描述]()
- 每個元素的margin外邊距，
盒子的左邊距會與包含塊border外邊框的左邊相接觸（對於從左到右的格式化，否則相反），即使存在浮動也會如此。
![在這裏插入圖片描述]()
- BFC就是頁面上的一個獨立容器，容器裏面的元素不會影響到外面的元素
