大家好，我是IT修真院鄭州分院，一枚正直、純潔、善良的web程序員。
今天給大家分享一下，修真院官網(wǎng) CSS任務(wù)中可能會使用到的知識點(diǎn)：
BFC及其如何工作？
一、背景介紹
什么是Box和Formatting Context
Box 是 CSS 布局的對象和基本單位， 直觀點(diǎn)來說，就是一個(gè)頁面是由很多個(gè) box 組成的。 任何被渲染的元素都屬于一個(gè) box ，設(shè)置元素的display 屬性，決定了這個(gè) Box 的類型是block還是inline。
格式化上下文( Formatting Context )是決定如何渲染文檔的容器，它包括:
塊級格式化上下文( Block formatting context )( BFC )
行內(nèi)格式化上下文( Inline formatting context ) ( IFC )
自適應(yīng)格式化上下文( Flex Formatting Context )( FFC )
網(wǎng)格布局格式化上下文(GridLayout Formatting Context)(GFC)
不同類型的 Box， 會參與不同的Formatting Context，因此Box內(nèi)的元素就會以不同的方式渲染。
二、知識剖析
讓我們看看有哪些盒子：
block-level box(塊級盒元素）:display 屬性為 block, list-item, table 的元素、元素本身為塊級元素的元素(如div），會生成 block-level box。并且參與 block fomatting context（塊級格式化上下文）
inline-level box（行級盒元素）:display 屬性為 inline, inline-block, inline-table 的元素、元素本身為行級元素的元素（如span），會生成 inline-level box。并且參與 inline formatting context（行級格式化上下文）；
run-in box? css3里加入的屬性，在這里就不多介紹了；
BFC布局規(guī)則
1、內(nèi)部的Box會在垂直方向，一個(gè)接一個(gè)地放置。
2、Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會發(fā)生重疊
3、 每個(gè)元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
4、 BFC的區(qū)域不會與float box重疊。
5、BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
6、計(jì)算BFC的高度時(shí)，浮動元素也參與計(jì)算
三、常見問題
問題:有哪些方式能夠觸發(fā)BFC模式呢？
解決方案
1、根元素
2、float屬性不為none
3、position為absolute或fixed
4、display為inline-blcok、table-cell、table-caption、flex、inline-flex
5、overflow不為visible
四、BFC的應(yīng)用
1、自適應(yīng)兩欄布局
.aside{
width:100px;
height:150px;
float:left;
background:#f66;
}
.main{
height:200px;
background:#fcc;
}
上面中的例子我們可以看出，每個(gè)元素的margin box的左邊與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此
因此，雖然存在浮動的元素，但main的左邊依然會與包含塊的左邊相接觸。
為main加入觸發(fā)BFC的條件overflow：hidden，就可以實(shí)現(xiàn)兩欄布局了。
2、清除內(nèi)部浮動
.par{
overflow:hidden;
border:5px solid#fcc;
width:300px;
}
.child{
border:5px solid#f66;
width:100px;
height:100px;
float:left;
}
根據(jù)BFC布局規(guī)則第六條：計(jì)算BFC的高度時(shí)，浮動元素也參與計(jì)算
為了清除內(nèi)部浮動，我們可以觸發(fā).par生成BFC，那么.par在計(jì)算高度時(shí)，.par內(nèi)部的浮動元素也會參與計(jì)算.
3、防止margin重疊
.top{
display:inline-block;
width:100px;
height:100px;
margin:50px;
background:#fcc;
}
.down{
width:100px;
height:100px;
margin:30px;
background:#fcc;
}
這個(gè)例子讓top或者down任意一個(gè)觸發(fā)BFC，就可以防止垂直方向上的margin重疊。
五、拓展思考
IFC是如何工作的？
答：IFC的line box(線框)高度是由其包含行內(nèi)元素中最高的實(shí)際高度來計(jì)算的， （不受到豎直方向的padding/margin影響），IFC中的line box一般左右都緊貼整個(gè)IFC， 但是會因?yàn)楦觙loat元素而擾亂。float元素會位于IFC與line box之間，使得line box寬度縮短。 同個(gè)IFC下的多個(gè)line box高度會不同。IFC中不能有塊級元素，當(dāng)插入塊級元素時(shí)，會產(chǎn)生兩個(gè)匿名塊 與div分隔開，即產(chǎn)生兩個(gè)IFC，每個(gè)IFC對外表現(xiàn)為塊級元素，與div垂直排列。作用：水平居中：當(dāng)一個(gè) 塊要在環(huán)境中水平居中時(shí)，設(shè)置其為inline-block就會在外層產(chǎn)生IFC，通過text-align就可以使其水平居中。 垂直居中：創(chuàng)建IFC，用其中一個(gè)元素?fù)伍_父元素的高度，然后設(shè)置vertical-align：middle，其他行內(nèi)元素 就可以在父元素中處置居中了。
六、參考文獻(xiàn)
參考一：BFC神奇的背后
參考二：張鑫旭博客
七、視頻鏈接
今天的分享就到這里啦，歡迎大家點(diǎn)贊、轉(zhuǎn)發(fā)、留言、拍磚~
