什么是BFC鞋囊？
BFC即Block Formatting Context的縮寫止后，中文翻譯過來就是塊級(jí)格式化上下文。
BFC的原理
本質(zhì)上就是BFC得渲染規(guī)則溜腐，總結(jié)起來有四點(diǎn)：
- 屬于同一個(gè)BFC的倆個(gè)相鄰的元素的margin會(huì)發(fā)生重疊
- BFC的元素不會(huì)與浮動(dòng)元素產(chǎn)生重疊
- BFC的元素是一個(gè)獨(dú)立的容器译株，容器內(nèi)的元素不會(huì)影響容器外部的元素，相反挺益，容器外的元素也不會(huì)影響容器內(nèi)的元素
- 計(jì)算BFC的元素的高度的時(shí)候歉糜，浮動(dòng)元素也會(huì)參與計(jì)算
如何創(chuàng)建BFC?
- float值不為none
- position為absolute或fixed
- display為inline-block，table-cell望众，table-caption匪补，flex；
- overflow不為visible
BFC的使用場(chǎng)景
BFC的使用場(chǎng)景烂翰，緊貼BFC的原理進(jìn)行闡述夯缺。
（1） BFC的元素垂直方向的邊距會(huì)發(fā)生重疊
<style>
* {
padding: 0;
margin: 0;
}
.container {
/* 創(chuàng)建BFC */
overflow: hidden;
}
.block {
height: 100px;
margin: 10px 0 30px 0;
background: greenyellow;
}
</style>
<div class="container">
<div class="block">我是第一個(gè)BFC</div>
<div class="block">我是第二個(gè)BFC</div>
<div class="block">我是第三個(gè)BFC</div>
</div>
由于BFC內(nèi)部元素的垂直方向的邊距會(huì)發(fā)生重疊，因此第一個(gè)block和第二個(gè)block相距30px甘耿，并不是40px踊兜。因此，運(yùn)行結(jié)果如下入所示棵里。
（2） BFC的元素不會(huì)與浮動(dòng)元素產(chǎn)生重疊
<style>
* {
padding: 0;
margin: 0;
}
.left {
float: left;
width: 200px;
height: 400px;
background: yellowgreen;
}
.right {
height: 500px;
background: violet;
}
</style>
<div class="left"></div>
<div class="right"></div>
運(yùn)行結(jié)果如下圖所示：
可以發(fā)現(xiàn)润文，right類和left類發(fā)生了重疊姐呐，若業(yè)務(wù)要求我們r(jià)ight類和left類不能重疊，相互獨(dú)立典蝌，這時(shí)候我們可以使用BFC的渲染規(guī)則曙砂，只需添加一行代碼便可達(dá)到這一目的，對(duì)代碼進(jìn)行改造骏掀。
<style>
* {
padding: 0;
margin: 0;
}
.left {
float: left;
width: 200px;
height: 400px;
background: yellowgreen;
}
.right {
height: 500px;
background: violet;
/* 創(chuàng)建BFC */
overflow: hidden;
}
</style>
<div class="left"></div>
<div class="right"></div>
查看運(yùn)行結(jié)果鸠澈，果然達(dá)到了我們想要的效果。
（3）計(jì)算BFC的元素的高度的時(shí)候截驮，浮動(dòng)元素也會(huì)參與計(jì)算
利用這條BFC的渲染規(guī)則笑陈，我們可以很好的利用其作清除浮動(dòng)。老規(guī)矩葵袭，上代碼涵妥。
<style>
* {
padding: 0;
margin: 0;
}
.parent {
background: red;
}
.children {
float: left;
height: 300px;
width: 400px;
background: springgreen;
}
</style>
<div class="parent">
<div class="children"></div>
</div>
從運(yùn)行結(jié)果可以看出，由于children類浮動(dòng)脫離了文檔流坡锡，因此沒有把parent類的高度撐開蓬网，parent類高度為0，沒有顯示出來鹉勒。因此我們可以利用BFC元素計(jì)算高度的時(shí)候帆锋，浮動(dòng)元素也會(huì)參與計(jì)算這一BFC渲染規(guī)則，對(duì)其進(jìn)行改造禽额，同樣是增添一行代碼锯厢，改造后的代碼如下。
<style>
* {
padding: 0;
margin: 0;
}
.parent {
background: red;
/* 創(chuàng)建BFC */
overflow: hidden;
}
.children {
float: left;
height: 300px;
width: 400px;
background: springgreen;
}
</style>
<div class="parent">
<div class="children"></div>
</div>
給parent類創(chuàng)建了BFC之后脯倒，在計(jì)算parent類高度的時(shí)候实辑，也會(huì)把浮動(dòng)元素的高度計(jì)算在其中，這也算是清除浮動(dòng)了吧盔憨。
如果覺得本文對(duì)你有收獲的朋友徙菠，請(qǐng)點(diǎn)個(gè)贊，接下來的日子我會(huì)繼續(xù)更新更好的技術(shù)博客郁岩！謝謝~
