關(guān)于BFC的相關(guān)臊岸，這里做一個(gè)比較詳細(xì)的總結(jié)
1禁筏、BFC的基本概念
BFC：直白點(diǎn)說(shuō)就是滿足一定規(guī)則的一個(gè)塊級(jí)布局區(qū)域繁涂，這就是核心了，我們可以利用BFC的規(guī)則來(lái)很容易的達(dá)到某些布局需求藐唠，其實(shí)我們?cè)诓季种泻芸赡芤呀?jīng)默默用過(guò)BFC了帆疟，但是對(duì)BFC沒(méi)有一個(gè)比較清晰的認(rèn)知，下面我就詳細(xì)的介紹一下
Box
Box 是 CSS 布局的對(duì)象和基本單位宇立， 一個(gè)布局頁(yè)面就是各種各樣的Box組成的踪宠，不同類型的Box會(huì)有不同的渲染規(guī)則，下面是常用的box概念
- block-level box:display 屬性為 block, list-item, table 的元素妈嘹，會(huì)生成 block-level box柳琢。并且參與 block fomatting context；
- inline-level box:display 屬性為 inline, inline-block, inline-table 的元素润脸，會(huì)生成 inline-level box柬脸。并且參與 inline formatting context；
Formatting context
Formatting context 是 W3C CSS2.1 規(guī)范中的一個(gè)概念毙驯。它是頁(yè)面中的一塊渲染區(qū)域倒堕，并且有一套渲染規(guī)則，它決定了其子元素將如何定位爆价，以及和其他元素的關(guān)系和相互作用垦巴。最常見(jiàn)的 Formatting context 有 Block fomatting context（BFC）和 Inline formatting context （IFC）媳搪。
另外，CSS3中還增加了Grid（GFC）和Flex（FFC）
BFC詳細(xì)定義
BFC(Block formatting context)直譯為"塊級(jí)格式化上下文"骤宣。它是一個(gè)獨(dú)立的渲染區(qū)域秦爆，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局憔披，并且與這個(gè)區(qū)域外部毫不相干等限。
BFC布局規(guī)則：
- 內(nèi)部的Box會(huì)在垂直方向依次放置。
- Box垂直方向的距離由margin決定芬膝，屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊
- 每個(gè)元素的margin box的左邊望门， 與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)锰霜。即使存在浮動(dòng)也是如此怒允。
- BFC的區(qū)域不會(huì)與float box重疊。
- BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器锈遥，容器里面的子元素不會(huì)影響到外面的元素。
- 計(jì)算BFC的高度時(shí)勘畔，浮動(dòng)元素也參與計(jì)算
BFC的生成方法
- 根元素
- float屬性不為none
- position為absolute或fixed
- display為inline-block, table-cell, table-caption, flex, inline-flex
- overflow不為visible
2所灸、BFC的應(yīng)用
-
內(nèi)部清除浮動(dòng)，浮動(dòng)會(huì)導(dǎo)致父級(jí)元素整體結(jié)構(gòu)塌陷炫七，我們通過(guò)構(gòu)造BFC爬立，可以達(dá)到清除浮動(dòng)的功能，具體如下
這里需要給父元素加上overflow: auto屬性即可万哪，構(gòu)造成BFC后侠驯，浮動(dòng)元素也會(huì)計(jì)算寬度
塌陷的父級(jí)元素：
塌陷的父級(jí)元素.png
構(gòu)造BFC后的父級(jí)元素：
構(gòu)造BFC后的結(jié)構(gòu).png -
解決margin重疊的問(wèn)題
這里將兩個(gè)子元素放置在兩個(gè)不同的BFC中，才不會(huì)發(fā)生重疊奕巍，在同一個(gè)BFC下吟策，會(huì)發(fā)生margin重疊，這個(gè)是BFC的布局規(guī)則
margin重疊的情況：
margin重疊的情況.png
構(gòu)造BFC后的情況：
構(gòu)造BFC后的margin情況.png -
解決自適應(yīng)左右布局的問(wèn)題
這里是采用的左右布局的一種方法的止，即左邊浮動(dòng)檩坚，右邊構(gòu)造BFC的方法，因?yàn)楦?dòng)元素會(huì)脫離文檔流诅福，構(gòu)造成BFC后匾委，會(huì)計(jì)算浮動(dòng)元素的寬度，另外一邊自然就能自適應(yīng)了
左浮動(dòng)氓润，右邊未構(gòu)造BFC赂乐，會(huì)導(dǎo)致右側(cè)在文檔流中從最左邊開(kāi)始，我們說(shuō)了float會(huì)導(dǎo)致元素脫離文檔流咖气，如下圖：
左浮動(dòng)右自適應(yīng)布局未構(gòu)造BFC.png
左浮動(dòng)挨措，右邊構(gòu)造BFC挖滤，這是應(yīng)用了 BFC的區(qū)域不會(huì)與float box重疊的特性：
左浮動(dòng)右邊構(gòu)造BFC效果.png
