學習塊格式化上下文（BlockFormattingContext）

時間 2019-11-16

標籤學習格式化上下文 blockformattingcontext 简体版

原文原文鏈接

什麼是BFC

BFC全稱是Block Formatting Context，即塊格式化上下文。它是CSS2.1規範定義的，關於CSS渲染定位的一個概念。要明白BFC究竟是什麼，首先來看看什麼是視覺格式化模型。html

視覺格式化模型

視覺格式化模型(visual formatting model)是用來處理文檔並將它顯示在視覺媒體上的機制，它也是CSS中的一個概念。瀏覽器

視覺格式化模型定義了盒（Box）的生成，盒主要包括了塊盒、行內盒、匿名盒（沒有名字不能被選擇器選中的盒）以及一些實驗性的盒（將來可能添加到規範中）。盒的類型由display屬性決定。less

塊盒（block box）

塊盒有如下特性：ide

當元素的CSS屬性display爲block，list-item或 table時，它是塊級元素 block-level；
視覺上呈現爲塊，豎直排列；
塊級盒參與(塊格式化上下文)；
每一個塊級元素至少生成一個塊級盒，稱爲主要塊級盒(principal block-level box)。一些元素，好比<li>，生成額外的盒來放置項目符號，不過多數元素只生成一個主要塊級盒。

行內盒（inline box）

當元素的CSS屬性display的計算值爲inline，inline-block或inline-table時，稱它爲行內級元素；
視覺上它將內容與其它行內級元素排列爲多行；典型的如段落內容，有文本(能夠有多種格式譬如着重)，或圖片，都是行內級元素；
行內級元素生成行內級盒(inline-level boxes)，參與行內格式化上下文(inline formatting context)。同時參與生成行內格式化上下文的行內級盒稱爲行內盒(inline boxes)。全部display:inline的非替換元素生成的盒是行內盒；
不參與生成行內格式化上下文的行內級盒稱爲原子行內級盒(atomic inline-level boxes)。這些盒由可替換行內元素，或 display 值爲 inline-block 或 inline-table 的元素生成，不能拆分紅多個盒；

匿名盒（anonymous box）

匿名盒也有份匿名塊盒與匿名行內盒，由於匿名盒沒有名字，不能利用選擇器來選擇它們，因此它們的全部屬性都爲inherit或初始默認值；佈局

以下面例子，會創鍵匿名塊盒來包含毗鄰的行內級盒：flex

<div>
    Some inline text
    <p>followed by a paragraph</p>
    followed by more inline text.
</div>

三個定位方案

在定位的時候，瀏覽器就會根據元素的盒類型和上下文對這些元素進行定位，能夠說盒就是定位的基本單位。定位時，有三種定位方案，分別是常規流，浮動已經絕對定位。ui

常規流(Normal flow)

在常規流中，盒一個接着一個排列;
在塊級格式化上下文裏面，它們豎着排列；
在行內格式化上下文裏面，它們橫着排列;
當position爲static或relative，而且float爲none時會觸發常規流；
對於靜態定位(static positioning)，position: static，盒的位置是常規流佈局裏的位置；
對於相對定位(relative positioning)，position: relative，盒偏移位置由這些屬性定義top，bottom，leftandright。即便有偏移，仍然保留原有的位置，其它常規流不能佔用這個位置。

浮動(Floats)

盒稱爲浮動盒(floating boxes)；
它位於當前行的開頭或末尾；
這致使常規流環繞在它的周邊，除非設置 clear 屬性；

絕對定位(Absolute positioning)

絕對定位方案，盒從常規流中被移除，不影響常規流的佈局；
它的定位相對於它的包含塊，相關CSS屬性：top，bottom，left及right；
若是元素的屬性position爲absolute或fixed，它是絕對定位元素；
對於position: absolute，元素定位將相對於最近的一個relative、fixed或absolute的父元素，若是沒有則相對於body；

塊格式化上下文

到這裏，已經對CSS的定位有必定的瞭解了，從上面的信息中也能夠得知，塊格式上下文是頁面CSS 視覺渲染的一部分，用於決定塊盒子的佈局及浮動相互影響範圍的一個區域。atom

BFC的建立方法

根元素或其它包含它的元素；
浮動 (元素的float不爲none)；
絕對定位元素 (元素的position爲absolute或fixed)；
行內塊inline-blocks(元素的 display: inline-block)；
表格單元格(元素的display: table-cell，HTML表格單元格默認屬性)；
overflow的值不爲visible的元素；
彈性盒 flex boxes (元素的display: flex或inline-flex)；

但其中，最多見的就是overflow:hidden、float:left/right、position:absolute。也就是說，每次看到這些屬性的時候，就表明了該元素以及建立了一個BFC了。code

BFC的範圍

BFC的範圍在MDN中是這樣描述的。orm

A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.

中文的意思一個BFC包含建立該上下文元素的全部子元素，但不包括建立了新BFC的子元素的內部元素。

這段看上去有點奇怪，我是這麼理解的，加入有下面代碼，class名爲.BFC表明建立了新的塊格式化：

<div id='div_1' class='BFC'>
    <div id='div_2'>
        <div id='div_3'></div>
        <div id='div_4'></div>
    </div>
    <div id='div_5' class='BFC'>
        <div id='div_6'></div>
        <div id='div_7'></div>
    </div>
</div>

這段代碼表示，#div_1建立了一個塊格式上下文，這個上下文包括了#div_2、#div_3、#div_4、#div_5。即#div_2中的子元素也屬於#div_1所建立的BFC。但因爲#div_5建立了新的BFC，因此#div_6和#div_7就被排除在外層的BFC以外。

我認爲，這從另外一方角度說明，一個元素不能同時存在於兩個BFC中。

BFC的一個最重要的效果是，讓處於BFC內部的元素與外部的元素相互隔離，使內外元素的定位不會相互影響。這是利用BFC清除浮動所利用的特性，關於清除浮動將在後面講述。

若是一個元素可以同時處於兩個BFC中，那麼就意味着這個元素能與兩個BFC中的元素髮生做用，就違反了BFC的隔離做用，因此這個假設就不成立了。

BFC的效果

就如剛纔提到的，BFC的最顯著的效果就是創建一個隔離的空間，斷絕空間內外元素間相互的做用。然而，BFC還有更多的特性：

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

簡單概括一下：

內部的盒會在垂直方向一個接一個排列（能夠看做BFC中有一個的常規流）；
處於同一個BFC中的元素相互影響，可能會發生margin collapse；
每一個元素的margin box的左邊，與容器塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此；
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素，反之亦然；
計算BFC的高度時，考慮BFC所包含的全部元素，連浮動元素也參與計算；
浮動盒區域不疊加到BFC上；

這麼多性質有點難以理解，但能夠做以下推理來幫助理解：html的根元素就是<html>，而根元素會建立一個BFC，建立一個新的BFC時就至關於在這個元素內部建立一個新的<html>，子元素的定位就如同在一個新<html>頁面中那樣，而這個新舊html頁面之間時不會相互影響的。

上述這個理解並非最準確的理解，甚至是將因果倒置了（由於html是根元素，所以纔會有BFC的特性，而不是BFC有html的特性），但這樣的推理能夠幫助理解BFC這個概念。

從實際代碼來分析BFC

講了這麼多，仍是比較難理解，因此下面經過一些例子來加深對BFC的認識。

實例一

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .left{
        background: #73DE80;    /* 綠色 */
        opacity: 0.5;
        border: 3px solid #F31264;
        width: 200px;
        height: 200px;
        float: left;
    }
    .right{                     /* 粉色 */
        background: #EF5BE2;
        opacity: 0.5;
        border: 3px solid #F31264;
        width:400px;
        min-height: 100px;
    }
    .box{
        background:#888;
        height: 100%;
        margin-left: 50px;
    }
</style>
<div class='box'>
    <div class='left'> </div>
    <div class='right'> </div>
</div>

顯示效果：

綠色框（'#left'）向左浮動，它建立了一個新BFC，但暫時不討論它所建立的BFC。因爲綠色框浮動了，它脫離了本來normal flow的位置，所以，粉色框（'#right'）就被定位到灰色父元素的左上角（特性3：元素左邊與容器左邊相接觸），與浮動綠色框發生了重疊。

同時，因爲灰色框（'#box'）並無建立BFC，所以在計算高度的時候，並無考慮綠色框的區域（特性6：浮動區域不疊加到BFC區域上），發生了高度坍塌，這也是常見問題之一。

實例二

如今經過設置overflow:hidden來建立BFC，再看看效果如何。

.BFC{
    overflow: hidden;
}

<div class='box BFC'>
    <div class='left'> </div>
    <div class='right'> </div>
</div>

灰色框建立了一個新的BFC後，高度發生了變化，計算高度時它將綠色框區域也考慮進去了（特性5：計算BFC的高度時，浮動元素也參與計算）；

而綠色框和紅色框的顯示效果仍然沒有任何變化。

實例三

如今，現將一些小塊添加到粉色框中，看看效果：

<style>
    .little{
        background: #fff;
        width: 50px;
        height: 50px;
        margin: 10px;
        float: left;
    }
</style>

<div class='box BFC'>
    <div class='left'> </div>
    <div class='right'>
        <div class='little'></div>
        <div class='little'></div>
        <div class='little'></div>
    </div>
</div>

因爲粉色框沒有建立新的BFC，所以粉色框中白色塊受到了綠色框的影響，被擠到了右邊去了。先無論這個，看看白色塊的margin。

實例四

利用同實例二中同樣的方法，爲粉色框建立BFC：

<div class='box BFC'>
    <div class='left'> </div>
    <div class='right BFC'>
        <div class='little'></div>
        <div class='little'></div>
        <div class='little'></div>
    </div>
</div>

一旦粉色框建立了新的BFC之後，粉色框就不與綠色浮動框發生重疊了，同時內部的白色塊處於隔離的空間（特性4：BFC就是頁面上的一個隔離的獨立容器），白色塊也不會受到綠色浮動框的擠壓。