什麼是BFC
BFC(Block formatting context)直譯為"塊級格式化上下文"。它規定了內部的Block-level Box如何佈局，並且與這個區域外部毫不相干。 簡單來說，BFC就是用來格式化塊級盒子的。
通俗一點的方式解釋:
BFC 可以簡單的理解為某個元素的一個 CSS 屬性，只不過這個屬性不能被開發者顯式的修改，擁有這個屬性的元素對內部元素和外部元素會表現出一些特性，這就是BFC。
參考：[佈局概念] 關於CSS-BFC深入理解
如何觸發BFC
滿足下列條件之一就可觸發BFC
- 根元素，即HTML元素
- float的值不為none
- overflow的值不為visible
- display的值為inline-block、table-cell、table-caption
- position的值為absolute或fixed
BFC的使用場景
浮動
先了解一下常見的浮動情況
- 正常情況下的顯示
<style>
#test1{
height: 100px;
width: 100px;
background-color: red;
}
#test2{
height: 120px;
width: 120px;
background-color: blue;
}
</style>
<div id="root">
<div id="test1"></div>
<div id="test2"></div>
</div>
複製程式碼
因為兩個都是塊級元素，各自佔滿一行
如果設定了盒子的寬度，剩下的就是來補滿。如果沒有設定盒子寬度，盒子將佔滿一行。
<style>
#root{
border: 2px solid black;
overflow: hidden;
}
#test1{
height: 100px;
background-color: red;
}
</style>
<div id="root">
<div id="test1"></div>
</div>
複製程式碼
- 浮動情況下的顯示
<style>
#test1{
height: 100px;
width: 100px;
background-color: red;
float: left;
}
#test2{
height: 120px;
width: 120px;
background-color: blue;
}
</style>
<div id="root">
<div id="test1"></div>
<div id="test2"></div>
</div>
複製程式碼
紅色塊浮動，脫離了文件流，上升到了浮動流(浮動流的頂部是文件流中元素的底部)。因為當前文件流沒有內容了，藍色塊就成為了文件流第一個內容，取代了原來紅色塊的位置。
如果改一下相對位置
<div id="root">
<div id="test1"></div>
<div id="test2"></div>
</div>
複製程式碼
雖然浮動，但是上面被文件流中的藍色塊頂住了
避免覆蓋
只要將藍色塊設定為BFC，那麼就不會被紅色塊覆蓋了
BFC的區域不會與float box重疊
<style>
#test1{
height: 100px;
width: 100px;
background-color: red;
float: left;
}
#test2{
height: 120px;
width: 120px;
background-color: blue;
overflow: hidden;
}
</style>
<div id="root">
<div id="test1"></div>
<div id="test2"></div>
</div>
複製程式碼
清除浮動
<style>
#root{
border: 2px solid black;
}
#test1{
height: 100px;
width: 100px;
background-color: red;
float: left;
}
</style>
<div id="root">
<div id="test1"></div>
</div>
複製程式碼
父元素在計算高度的時候，不會計算浮動流的元素，所以父元素沒有被子元素撐開。只要為父元素設定BFC即可。
計算BFC的高度時，浮動元素也參與計算
<style>
#root{
border: 2px solid black;
overflow: hidden;
}
#test1{
height: 100px;
width: 100px;
background-color: red;
float: left;
}
</style>
<div id="root">
<div id="test1"></div>
</div>
複製程式碼
避免margin重疊
<style>
#root{
border: 2px solid black;
overflow: hidden;
}
#test1{
height: 100px;
width: 100px;
background-color: red;
margin: 50px;
}
#test2{
height: 100px;
width: 100px;
background-color: blue;
margin: 50px;
}
</style>
<div id="root">
<div id="test1"></div>
<div id="test2"></div>
</div>
複製程式碼
紅色塊和藍色塊四周的margin都是50px，但是它們接壤的部分，也只是50px，我們只要讓它們屬於不同的BFC即可。(注意：直接為它們設定BFC是無效的)
屬於同一個BFC的兩個相鄰Box的margin會發生重疊
<style>
#root{
border: 2px solid black;
}
#test1{
height: 100px;
width: 100px;
background-color: red;
margin: 50px;
}
#test2{
height: 100px;
width: 100px;
background-color: blue;
margin: 50px;
}
</style>
<div id="root">
<div style="overflow:hidden">
<div id="test1"></div>
</div>
<div style="overflow:hidden">
<div id="test2"></div>
</div>
</div>
複製程式碼
兩欄自適應
如果想實現左邊定寬，右邊自適應的佈局，可以使用BFC
BFC的區域不會與float box重疊
BFC不會和浮動元素重疊，所以只要右邊是BFC，且沒有設定寬度即可。因為它會在不和浮動元素重疊的情況下，佔滿一行
<style>
#test1{
height: 100px;
width: 100px;
background-color: red;
float: left;
}
#test2{
height: 100px;
background-color: blue;
margin: 50px;
overflow: hidden;
}
</style>
<div id="root">
<div id="test1"></div>
<div id="test2"></div>
</div>
複製程式碼
三欄自適應
<style>
#test1{
height: 100px;
width: 100px;
background-color: red;
float: left;
}
#test2{
height: 100px;
background-color: blue;
margin: 50px;
overflow: hidden;
}
#test3{
height: 100px;
width: 100px;
background-color: green;
float: right;
}
</style>
<div id="root">
<div id="test1"></div>
<div id="test3"></div>
<div id="test2"></div>
</div>
複製程式碼
因為上面也說了，如果浮動元素寫在藍色塊下面的話，會被藍色元素頂下去。所以紅色和綠色元素都寫在藍色塊上面。 它們往兩邊浮動之後，藍色塊就是當前文件流第一個元素，會在保持不和兩邊重疊的前提下，佔滿一行。