相信每個前端er多多少少都有接觸過BFC這個概念固灵，也有許多人表示對這個概念難以理解捅伤。
其實BFC并不是什么神秘莫測的東西，看完這篇文章巫玻，你就會覺得：“啥丛忆？BFC就這樣？”
對仍秤，BFC就這樣熄诡。
什么是BFC
先讓我們理解一下什么是BFC。
BFC是Block Formatting Context的縮寫诗力，中文稱為「塊格式化上下文」凰浮。
可以理解為一塊獨立的渲染區(qū)域，也就是說苇本，BFC擁有一套自己的渲染規(guī)則袜茧，不受外部影響，也不會影響到外界瓣窄。
為了更形象地理解笛厦，我們把BFC當(dāng)成一個封閉透明水缸，里面裝著水康栈，水上還漂浮著葉子递递。但是不管葉子怎么漂，都不會漂出這個水缸啥么，其他的東西也不會影響到水缸里面的東西登舞。
BFC能做什么
理解了BFC的概念，我們就來看看BFC這個水缸到底能做些什么悬荣。
1. 解決高度坍塌（清除浮動）
我們先來看看這段代碼
<style>
.tank {
padding: 10px;
background-color: skyblue;
}
.leaf {
float: left;
width: 100px;
height: 100px;
background-color: #c1f5b3;
}
</style>
<div class="tank">
<div class="leaf"></div>
</div>
我們可以看到菠秒，由于葉子（綠色
div）設(shè)置為了float元素，脫離了正常的文檔流，所以父級元素——水缸（藍(lán)色div）并沒有把葉子包圍住践叠，也就產(chǎn)生了所謂的高度坍塌問題言缤。
于是，葉子對水缸說：“爸爸禁灼，說好的做我的頂梁柱呢管挟，你怎么就塌了？弄捕！”
水缸摸了摸葉子的頭僻孝，說：“兒子別急，爸爸這就站起來守谓！”
這時候穿铆，水缸往自己身上加了個屬性：
.tank {
overflow: hidden;
padding: 10px;
background-color: skyblue;
}
這時候，奇跡出現(xiàn)了斋荞！
2. 解決外邊距重疊
我們假設(shè)鮮花和葉子的外邊距都是margin: 10px 0;
如果把他們放在一起荞雏，按理來說，他們之間應(yīng)該間隔20px才對平酿，但是孤男寡女的凤优，難免會產(chǎn)生愛的火花，二人步步逼近染服。
于是别洪，外邊距重疊問題就誕生叨恨。
<style>
.leaf {
margin: 10px 0;
width: 100px;
height: 100px;
background-color: #c1f5b3;
}
.flower {
margin: 10px 0;
width: 100px;
height: 100px;
background-color: crimson;
}
</style>
<div class="flower"></div>
<div class="leaf"></div>
這時候柳刮，BFC水缸爸爸出現(xiàn)了，爸爸說：“小孩子不可以早戀痒钝！”
于是把葉子關(guān)了起來秉颗。
<style>
.tank {
overflow: hidden;
background-color: skyblue;
}
.leaf {
margin: 10px 0;
width: 100px;
height: 100px;
background-color: #c1f5b3;
}
.flower {
margin: 10px 0;
width: 100px;
height: 100px;
background-color: crimson;
}
</style>
<div class="flower"></div>
<div class="tank">
<div class="leaf"></div>
</div>
這時候，我們可以看到送矩，二者的邊界不再重疊蚕甥。
那么，在同一個BFC內(nèi)部的兩個元素會發(fā)生外邊距重疊嗎栋荸？
答案是當(dāng)然會重疊了菇怀！進(jìn)了一家門，就是一家人啦晌块！
3. 自適應(yīng)布局
利用BFC可以實現(xiàn)自適應(yīng)的雙列和三列布局爱沟。
雙列自適應(yīng)布局
雙列自適應(yīng)布局是指一列由內(nèi)容撐開，另一列撐滿剩余寬度的布局方式匆背。
BFC爸爸教育兒子呼伸，與人相處要給他人留點空間，不可以逼的太緊钝尸，否則就會出現(xiàn)以下的情況括享。
<style>
.tank {
height: 500px;
background-color: skyblue;
}
.left {
float: left;
width: 100px;
height: 300px;
background-color: coral;
}
</style>
<div>
<aside class="left">左側(cè)</aside>
<main class="tank">主區(qū)域</main>
</div>
利用BFC則可解決搂根。
.tank {
overflow: hidden;
height: 500px;
background-color: skyblue;
}
三列自適應(yīng)布局
三列自適應(yīng)布局是中間列自適應(yīng)寬度，旁邊兩側(cè)固定寬度的布局方式铃辖。
BFC爸爸教育兒子：做人要懂得謙讓剩愧，你們先選，我補位娇斩。
<style>
.tank {
overflow: hidden;
height: 500px;
background-color: skyblue;
}
.left {
float: left;
width: 100px;
height: 300px;
background-color: coral;
}
.right {
float: right;
width: 100px;
height: 300px;
background-color: coral;
}
</style>
<div>
<aside class="left">左側(cè)</aside>
<aside class="right">右側(cè)</aside> // 注意書寫順序隙咸，aside先寫。（謙讓３上础Ｎ宥健）
<main class="tank">主區(qū)域</main>
</div>
BFC特點
看了以上的例子，相信各位對BFC的特點也有了一定的了解瓶殃〕浒總結(jié)起來就是：
- BFC是獨立的，不影響外部遥椿，也不被外部影響基矮。
- BFC的高度包括浮動的子元素
- BFC的區(qū)域不會與其他元素發(fā)生外邊距重疊
- BFC內(nèi)部的元素會發(fā)生外邊距重疊
BFC如何創(chuàng)建
死記硬背的時刻到了。
一個塊格式化上下文由以下之一創(chuàng)建：
- 根元素
<html>就是一個純天然的BFC - 浮動元素 (元素的
float不是none) - 絕對定位元素 (元素具有
position為absolute或fixed) - 內(nèi)聯(lián)塊 (元素具有
display: inline-block) - 表格單元格 (元素具有
display: table-cell, HTML表格單元格默認(rèn)屬性) - 表格標(biāo)題 (元素具有
display: table-caption, HTML表格標(biāo)題默認(rèn)屬性) -
具有overflow且值不是visible的塊元素冠场。
總結(jié)
怎么樣家浇？BFC是不是并沒有想象中的那么深不可測。
重在理解碴裙，理解后就會有一種豁然開朗之感~
