1 什么是BFC
BFC，Block fomatting context变勇，塊級格式化上下文恤左。
Formatting context 是 W3C CSS2.1 規(guī)范中的一個概念。它是頁面中的一塊渲染區(qū)域搀绣，并且有一套渲染規(guī)則飞袋，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用链患。最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)巧鸭。
參與block formattinh context的元素有：
display 屬性為 block, list-item, table 的元素
參與Inline formatting context的元素有：
display 屬性為 inline, inline-block, inline-table 的元素
BFC的特點為：
- 在形成盒模型中，內(nèi)部元素的行為不會影響盒外部元素麻捻。
- 計算盒模型高度時纲仍，浮動元素也參與計算。（也就是解決float導致的高度塌陷問題
- BFC區(qū)域不會與Float Box重疊贸毕。（也就是可以用來實現(xiàn)自適應布局
- 在BFC盒模型中郑叠，垂直margin會折疊，相鄰margin會疊加
2 如何實現(xiàn)BFC
- 浮動元素明棍。比如 float：left
- 絕對定位乡革。比如 position:absolute/fixed
- overflow除了visible之外的值。比如 overflow: hidden/auto
- display為以下其中之一的值inline-blocks摊腋，table沸版，table-cell，table-caption兴蒸。（不怎么用
3 實現(xiàn)BFC的目的
- 配合float box實現(xiàn)自適應布局
<div class="container">
<div class="left"></div>
<div class="content"></div>
</div>
.container {
height: 500px;
}
.left {
height: 200px;
width: 200px;
float: left;
background-color: aqua;
}
.content {
height: 100%;
background-color: bisque;
}
<img width="375" alt="image" src="https://github.com/wangpinyuan/blog/assets/20550379/b56d696c-11c8-4427-999c-dd859a8d8fb0">
此時视粮，左側元素float，右側元素圍繞其包裹橙凳。
overflow: hidden;
float: left;
給右側元素增加以上屬性蕾殴，即可消除包裹效果笑撞。
<img width="551" alt="image" src="https://github.com/wangpinyuan/blog/assets/20550379/884b61a7-d4f7-4325-b2fa-2b7ae05fc593">
- 解決float導致的父元素高度塌陷
<img width="371" alt="image" src="https://github.com/wangpinyuan/blog/assets/20550379/ba5716b3-dd26-49c2-a4d6-4e03422a218f">
<img width="576" alt="image" src="https://github.com/wangpinyuan/blog/assets/20550379/d80fcc81-3434-40ab-a530-71c4ce90b700">
上圖中兩個子元素float: left；父元素在計算高度時区宇，不會計算子元素高度娃殖，于是塌陷值戳。
處理方法如上：
<img width="1427" alt="image" src="https://github.com/wangpinyuan/blog/assets/20550379/0fc4f544-8d16-449e-b5d3-d00c70250022">
