神奇的BFC

GraphQuery 發(fā)布于2019-08-29 15:07 / 868人閱讀

摘要：垂直方向的距離由決定。根據(jù)布局規(guī)則第四條的區(qū)域不會與重疊。因此會根據(jù)包含塊的寬度，和的寬度，自動(dòng)變窄。效果如下清除內(nèi)部浮動(dòng)根據(jù)布局規(guī)則第六條計(jì)算的高度時(shí)，浮動(dòng)元素也參與計(jì)算。

概念

BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個(gè)區(qū)域外部毫不相干。

生成BFC的元素

根元素

float屬性不為none

position為absolute或fixed

display為inline-block, table-cell, table-caption, flex, inline-flex

overflow不為visible

布局規(guī)則

內(nèi)部的Box會在垂直方向，一個(gè)接一個(gè)地放置。

Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會發(fā)生重疊

每個(gè)元素的margin box的左邊，與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此。

BFC的區(qū)域不會與float box重疊。

BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會影響到外面的元素。反之也如此。

計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算

實(shí)例 自適應(yīng)兩欄布局

根據(jù)“每個(gè)元素的margin box的左邊，與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此。”，所以元素布局如下：

雖然存在浮動(dòng)的元素aslide，但main的左邊依然會與包含塊的左邊相接觸。

根據(jù)BFC布局規(guī)則第四條：BFC的區(qū)域不會與float box重疊。我們可以通過通過觸發(fā)main生成BFC，來實(shí)現(xiàn)自適應(yīng)兩欄布局。當(dāng)觸發(fā)main生成BFC后，這個(gè)新的BFC不會與浮動(dòng)的aside重疊。因此會根據(jù)包含塊的寬度，和aside的寬度，自動(dòng)變窄。效果如下：

.main {
    overflow: hidden;
}

清除內(nèi)部浮動(dòng)

根據(jù)BFC布局規(guī)則第六條：計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算。為達(dá)到清除內(nèi)部浮動(dòng)，我們可以觸發(fā)par生成BFC，那么par在計(jì)算高度時(shí)，par內(nèi)部的浮動(dòng)元素child也會參與計(jì)算。