BFC 的中文意思是塊級格式化上下文,是用于布局塊級盒子的獨(dú)立渲染區(qū)域，一個創(chuàng)建了新的 BFC 的盒子是獨(dú)立布局的，盒子內(nèi)元素的布局 不會影響盒子外面的元素。簡單來說就是 BFC 就是 css 的一個布局概念，是一個獨(dú)立的區(qū)域(容器) 滿足下列條件之一就可以觸發(fā) BFC:
HTML 根元素
position 為 absolute 或 fixed
float 屬性不為 none（常用）
overflow 不為 visible（常用）
display 為 inline-block， table-cell， table-caption， flex（常用)
可以解決什么問題:margin 重疊,清除浮動,自適應(yīng)布局.
BFC 是什么
我們在頁面布局的時候，經(jīng)常出現(xiàn)以下情況：
這個元素高度怎么沒了？
這兩欄布局怎么沒法自適應(yīng)？
這兩個元素的間距怎么有點(diǎn)奇怪的樣子？
......
原因是元素之間相互的影響，導(dǎo)致了意料之外的情況，這里就涉及到BFC概念
BFC（Block Formatting Context），即塊級格式化上下文，它是頁面中的一塊渲染區(qū)域，并且有一套屬于自己的渲染規(guī)則：
內(nèi)部的盒子會在垂直方向上一個接一個的放置
對于同一個 BFC 的倆個相鄰的盒子的 margin 會發(fā)生重疊，與方向無關(guān)。
每個元素的左外邊距與包含塊的左邊界相接觸（從左到右），即使浮動元素也是如此
BFC 的區(qū)域不會與 float 的元素區(qū)域重疊
計算 BFC 的高度時，浮動子元素也參與計算
BFC 就是頁面上的一個隔離的獨(dú)立容器，容器里面的子元素不會影響到外面的元素，反之亦然
BFC目的是形成一個相對于外界完全獨(dú)立的空間，讓內(nèi)部的子元素不會影響到外部的元素
觸發(fā)條件
根元素(HTML)
浮動元素：float屬性不為none
絕對定位元素：position屬性為absolute或fixed
display為inline-block、table-cell等塊狀元素
overflow屬性值不為visible的塊級元素
當(dāng)滿足以上條件之一時，就會創(chuàng)建一個新的BFC區(qū)域，其中元素將按照BFC規(guī)則進(jìn)行布局和渲染。
應(yīng)用場景
<style>
p{
color:#f55;
background:#fcc;
width:200px;
line-height:100px;
text-align:center;
margin:100px;
}
</style>
<body>
<p>Haha</p>
<p>Hehe</p>
</body>
這時候，邊距則不會重疊：
頁面顯示如下：
兩個p元素之間的距離為100px，發(fā)生了margin重疊（塌陷），以最大的為準(zhǔn)，如果第一個 P 的margin為 80 的話，兩個 P 之間的距離還是 100，以最大的為準(zhǔn)。
前面講到，同一個BFC的倆個相鄰的盒子的margin會發(fā)生重疊
可以在p外面包裹一層容器，并觸發(fā)這個容器生成一個BFC，那么兩個p就不屬于同一個BFC，則不會出現(xiàn)margin重疊
<style>
.wrap{
overflow:hidden;// 新的BFC
}
p{
color:#f55;
background:#fcc;
width:200px;
line-height:100px;
text-align:center;
margin:100px;
}
</style>
<body>
<p>Haha</p>
<div class="wrap">
<p>Hehe</p>
</div>
</body>
這時候，邊距則不會重疊：
清除內(nèi)部浮動
<style>
.par{
border:5px solid #fcc;
width:300px;
}
.child{
border:5px solid #f66;
width:100px;
height:100px;
float:left;
}
</style>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
頁面顯示如下：
而BFC在計算高度時，浮動元素也會參與，所以我們可以觸發(fā).par元素生活才能BFC，則內(nèi)部浮動元素計算高度時候也會計算
.par{
overflow:hidden;
}
實(shí)現(xiàn)效果如下：
自適應(yīng)多欄布局
這里舉個兩欄的布局
<style>
body{
width:300px;
position:relative;
}
.aside{
width:100px;
height:150px;
float:left;
background:#f66;
}
.main{
height:200px;
background:#fcc;
}
</style>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
效果圖如下：
前面講到，每個元素的左外邊距與包含塊的左邊界相接觸
因此，雖然.aslide為浮動元素，但是main的左邊依然會與包含塊的左邊相接觸
而BFC的區(qū)域不會與浮動盒子重疊
所以我們可以通過觸發(fā)main生成BFC，以此適應(yīng)兩欄布局
.main{
overflow:hidden;
}
這時候，新的BFC不會與浮動的.aside元素重疊。因此會根據(jù)包含塊的寬度，和.aside的寬度，自動變窄
效果如下：
小結(jié)
可以看到上面幾個案例，都體現(xiàn)了BFC實(shí)際就是頁面一個獨(dú)立的容器，里面的子元素不影響外面的元素
參考文獻(xiàn)
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context
