在解釋BFC之前怜庸，我們需要了解一下我們常說的HTML的文檔流。
文檔流
文檔流驴一，其實就是指BFC中的FC休雌，F(xiàn)C(Formatting Context)灶壶，格式化上下文肝断，它是頁面中的一塊渲染區(qū)域，有一套渲染規(guī)則驰凛，決定了其子元素如何布局胸懈，以及和其他元素之間的關(guān)系和作用。
其實文檔流根據(jù)元素在排版中的定位類型分為三種恰响，分別為：
- 標(biāo)準(zhǔn)流
- 浮動流
- 定位流
1. 標(biāo)準(zhǔn)流
也叫普通流趣钱，就是我們常說的文檔流，指的是HTML中元素在計算布局排版的過程中胚宦，所有處于文檔流中的元素會自動的從左到右(非塊級元素)首有，從上到下(塊級元素)的排列規(guī)則。
2. 浮動流
使用float使元素脫離了標(biāo)準(zhǔn)的文檔流枢劝，會導(dǎo)致其他處于文檔流中的盒子在計算布局排版時環(huán)繞在它的周邊井联，需要時可以設(shè)置 clear 屬性來清除浮動。
注意: 浮動會使元素脫離文檔流您旁，但是不會脫離文本流烙常，在其他盒子的文本內(nèi)容在計算布局時，浮動元素還是占位置的鹤盒。
文本流：指的是元素內(nèi)部的一系列的字符的排列規(guī)則蚕脏。
我們可以看到p2，p3元素在計算布局位置的時候侦锯，無視了開啟浮動的p1元素的位置驼鞭，從body元素的最左邊開始布局，而他們內(nèi)部的文本卻并沒有無視p1元素的位置尺碰。
-
定位流（position: absolute或fixed）
注意：使用定位會同時使元素脫離標(biāo)準(zhǔn)的文檔流和文本流终议，在其他盒子的文本內(nèi)容在計算布局時，定位元素不占位置
- 對于position: absolute葱蝗，元素定位將相對于上級元素中最近的一個使用了relative穴张、fixed、absolute的元素两曼，如果沒有則相對于body皂甘；
- 對于position：fixed，元素的定位則是相對于瀏覽器窗口悼凑；
脫離文檔流：指的是元素脫離正常元素的布局排版規(guī)則偿枕，其他處于文檔流中的盒子在計算布局排版時,會自動無視已脫離文檔流的元素來進(jìn)行定位璧瞬。
BFC(Block Formatting Context)塊級格式化上下文
BFC是用于布局塊級盒子的一塊渲染區(qū)域，你可以將一個 BFC 可以理解為一個容器渐夸，里面的元素不會影響到容器外的布局嗤锉；
可以簡單理解為一個元素的內(nèi)部子元素?zé)o論尺寸、定位如何變化墓塌，都不會影響外部元素的定位和尺寸
注意：一個BFC的范圍包含其容器內(nèi)的所有子元素瘟忱，但不包含其子元素的下級元素
形成BFC常見條件：
- 根元素，也就是 HTML 元素
- 浮動元素苫幢，即
float不是none - 定位元素访诱，
position是absolute或者fixed -
overflow不是visible的元素，如overflow:hidden - 行內(nèi)塊元素（
display：inline-block） -
display值為 table韩肝、flex触菜、grid
BFC的作用
清除浮動
-- 一個標(biāo)準(zhǔn)的文檔流的塊級元素可能被一個float元素覆蓋，擠占正常的文檔流哀峻，設(shè)置BFC這可以避免這種問題阻止相鄰元素的上下margin合并
用于解決容器元素高度塌陷問題
<style>
#div1, #div3 {
width: 100px;
height: 100px;
background: red;
margin-top: 20px;
margin-bottom: 20px;
}
<style>
如果想避免這種情況涡相，可以給這兩個 div 裹上一個 BFC。
<style>
.box {
overflow: hidden;
}
</style>
<div class="box">
<div id="div1"></div>
</div>
<div class="box">
<div id="div3"></div>
</div>
浮動元素脫離了正常的文檔流剩蟀，一般情況下催蝗，計算容器元素的高度時，是不會考慮浮動元素的高度喻旷，則會導(dǎo)致容器元素的內(nèi)部塌陷生逸；
但是當(dāng)容器元素就使用了 BFC，則不會一起塌下且预，容器元素的高度會根據(jù)子元素的高度自動撐開槽袄。
<style>
.container {
/* overflow: hidden; */
padding: 5px;
border: 1px solid #000;
}
.box {
float: left;
width: 100px;
height: 100px;
background-color: cornflowerblue;
}
</style>
<div class="container">
<div class="box"></div>
</div>
