資訊專欄INFORMATION COLUMN
摘要：什么是再解釋之前需要了解下面的一些概念有一個認(rèn)識框它是組成頁面的基本單元，一個界面可以由多個元素組成。瀏覽器支持，是規(guī)范中的一個概念。最常見的有簡稱和簡稱。即使存在浮動也是如此。根據(jù)布局規(guī)則第二條垂直方向的距離由決定。
什么是BFC？
再解釋之前需要了解下面的一些概念有一個認(rèn)識：
Box(框)
Box它是組成頁面的基本單元，一個界面可以由多個Box元素組成。元素的類型（塊級與行級）和display屬性決定了這個Box的類型，不同類型的 Box， 會參與不同的 Formatting Context（一個決定如何渲染文檔的容器），因此Box內(nèi)的元素會以不同的方式渲染。
Box目前分為一下幾種：
block-level
box:display 屬性為 block, list-item, table 的元素，會生成 block-level box。并且參與 block Formatting context；
inline-level
box:display 屬性為 inline, inline-block, inline-table 的元素，會生成 inline-level box。并且參與 inline formatting context；
run-in
box:display 屬性為 run-in的元素，會生成run-in-level box.
run-in框的行為如下：
1、如果run-in框包含一個塊框，那么run-in框變?yōu)閴K框。
2、如果run-in框的后繼兄弟元素為塊框（非浮動，非絕對定位），那么run-in框變?yōu)樵搲K框的第一個行內(nèi)框。run-in不能插入本身為run-in的塊中，也不能插入塊中已有run-in的塊中。
3、否則，run-in框變?yōu)閴K框。
瀏覽器支持：IE8+，chrome（unsupport）
style
.run-in-box {display: run-in;}
html:
case 1
some text...
some other text....case 2
A run-in heading.
And a paragraph of text that follows it.
case 3
A run-in heading.
And a span of text that follows it.
Formatting context
Formatting context 是 W3C CSS2.1 規(guī)范中的一個概念。它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。
BFC 定義
BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區(qū)域，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個區(qū)域外部毫不相干。
BFC布局規(guī)則：
內(nèi)部的Box會在垂直方向，一個接一個地放置。
Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊
每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
BFC的區(qū)域不會與float box重疊。
BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
計算BFC的高度時，浮動元素也參與計算
二、哪些元素會生成BFC?
根元素
float屬性不為none
position為absolute或fixed
display為inline-block, table-cell, table-caption, flex, inline-flex
overflow不為visible
三、BFC的作用及原理
1. 自適應(yīng)兩欄布局
代碼：
頁面
根據(jù)BFC布局規(guī)則第3條：
每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
因此，雖然存在浮動的元素aslide，但main的左邊依然會與包含塊的左邊相接觸。
根據(jù)BFC布局規(guī)則第四條：
BFC的區(qū)域不會與float box重疊。
我們可以通過通過觸發(fā)main生成BFC， 來實現(xiàn)自適應(yīng)兩欄布局。
.main {
overflow: hidden;
}
當(dāng)觸發(fā)main生成BFC后，這個新的BFC不會與浮動的aside重疊。因此會根據(jù)包含塊的寬度，和aside的寬度，自動變窄。效果如下：
2. 清除內(nèi)部浮動
頁面
根據(jù)BFC布局規(guī)則第六條：
計算BFC的高度時，浮動元素也參與計算
為達(dá)到清除內(nèi)部浮動，我們可以觸發(fā)par生成BFC，那么par在計算高度時，par內(nèi)部的浮動元素child也會參與計算。
代碼：
.par {
overflow: hidden;
}
效果圖：
3. 防止垂直 margin 重疊
Haha
Hehe
頁面
兩個p之間的距離為100px，發(fā)送了margin重疊。
根據(jù)BFC布局規(guī)則第二條：
Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊
我們可以在p外面包裹一層容器，并觸發(fā)該容器生成一個BFC。那么兩個P便不屬于同一個BFC，就不會發(fā)生margin重疊了。
代碼
Haha
Hehe
效果如下:
另一種情況
效果圖如下：
內(nèi)部的子元素的maring距父級的外邊距為0；
根據(jù)BFC規(guī)則第五條：
BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
我們可以將父級盒子觸發(fā)BFC，那么父級則屬于獨立容器，不受外面元素的影響；
代碼：
.box6 {
overflow: hidden;
}
效果圖如下:
其實以上的幾個例子都體現(xiàn)了BFC布局規(guī)則第五條：
BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
因為BFC內(nèi)部的元素和外部的元素絕對不會互相影響，因此， 當(dāng)BFC外部存在浮動時，它不應(yīng)該影響B(tài)FC內(nèi)部Box的布局，BFC會通過變窄，而不與浮動有重疊（兩端布局）。同樣的，當(dāng)BFC內(nèi)部有浮動時，為了不影響外部元素的布局，BFC計算高度時會包括浮動的高度。避免margin重疊也是這樣的一個道理。
參考：BFC 神奇背后的原理
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/53892.html
摘要：兩個兄弟盒之間的豎直距離由屬性決定。即使存在浮動盡管一個盒的行盒可能會因為浮動收縮，這也成立。它是塊級盒布局出現(xiàn)的區(qū)域，也是浮動層元素進行交互的區(qū)域。定位和清除浮動的樣式規(guī)則只適用于處于同一塊格式化上下文內(nèi)的元素。 現(xiàn)在有flex布局等新技術(shù)，bfc的效果比如包住元素，進行自適應(yīng)布局等已經(jīng)不需要了。現(xiàn)在只有免式的事后才需要知道BFC！ 看不懂的定義 CSS規(guī)范中對 BFC 的描述 9....
摘要：布局中有一些概念，一旦你理解了它們，就能真正提高你的布局能力。我們通常有兩種方法來解決這個布局問題。是布局中的一個迷你布局你可以將看作是頁面內(nèi)的一個迷你布局。理解瀏覽器如何布置網(wǎng)頁是非常基礎(chǔ)的。 CSS布局中有一些概念，一旦你理解了它們，就能真正提高你的 CSS 布局能力。本文是關(guān)于塊格式化上下文(BFC)的。你可能從未聽說過這個術(shù)語，但是如果你曾經(jīng)用CSS做過布局，你可能知道它是什么...
摘要：在一個中，兩個相鄰的塊級盒子的垂直會產(chǎn)生合并。對于從右到左的格式來說，則觸碰到右邊緣。正常人類的理解上面?zhèn)€什么瘠薄，看不懂。 BFC是什么? W3C這么說 在W3C規(guī)范中的BFC是這樣定義的： 浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如，inline-block、table-cells和table-captions），以及overflow值不為visiable的塊級盒子，都會為...
摘要：什么是再解釋之前需要了解下面的一些概念有一個認(rèn)識框它是組成頁面的基本單元，一個界面可以由多個元素組成。瀏覽器支持，是規(guī)范中的一個概念。最常見的有簡稱和簡稱。即使存在浮動也是如此。根據(jù)布局規(guī)則第二條垂直方向的距離由決定。 什么是BFC？ 再解釋之前需要了解下面的一些概念有一個認(rèn)識： Box(框) Box它是組成頁面的基本單元，一個界面可以由多個Box元素組成。元素的類型（塊級與行級）和d...
摘要：它是用于決定盒子的布局及浮動相互影響范圍的一個區(qū)域。小白反思如果世界的運行都有自我運行的一套機制，那么的世界必然有自己的一套規(guī)則。外邊距合并當(dāng)時在回答外邊距的問題時，總結(jié)出了合并的一條規(guī)則必須相鄰。 最初的夢 了解BFC后，能夠更深入的明白外邊距合并原理。了解BFC后，能夠更深入的明白浮動的行為。了解BFC后，知識就是你的，總不會吃虧對吧？哈哈 之前有兩篇文章《行內(nèi)元素的一些探索》、《...
閱讀 963·2023-04-25 23:54
閱讀 3046·2021-11-08 13:21
閱讀 3773·2021-09-27 13:35
閱讀 3391·2021-07-26 23:41
閱讀 1054·2019-08-30 15:52
閱讀 3438·2019-08-30 11:27
閱讀 2097·2019-08-29 18:37
閱讀 537·2019-08-29 17:24
