HTML——BFC

背景

BFC，即Block Format Context，塊級格式化做用域，咱們先無論它的目的是什麼，先來了解下格式化做用域的相關類型。

格式化做用域的類型

文檔流中的行內元素和塊級元素，都屬於格式化做用域，因此格式化做用域有兩種類型：

• 塊級格式化做用域
• 行內格式化做用域

格式化做用域的做用

格式化做用域，規定了當前節點內部的文檔流不受外界文檔流的影響。 （緣由很簡單啊，由於除了正常文檔流還有其餘形式的文檔流，好比float、fixed、absolute等方式會脫離當前正常文檔流）
說白了就是，html和css的一種約定，若是沒有這種約定，瀏覽器去解析下面的代碼

// html
<div class="normal">
    <div class="absolute">
        <div class="son"></div>
    </div>
</div>

//css
.normal {
    position: relative;
}
.absolute {
    position: absolute;
}
.son {
    position: relative;
}
複製代碼

對於normal和absolute兩個div能夠進行正常的解析，那son這個div應該怎麼解析這個div？是屬於noraml內部的仍是absolute內部的？瀏覽器就不知道怎麼辦了，而 有了這種約定，就能夠講son解析爲absolute的節點，對文檔進行更好的解析，而後呈如今瀏覽器上面。

塊級格式化做用域

如何觸發塊級格式化做用域？

• 浮動元素
• 絕對定位元素
• 不是塊狀盒子的盒子（好比inline-block/table-cells/table-captions）
• overflow不爲visible的元素

塊級化格式化做用域內部元素如何排列？

• 盒子從上到下排列
• 盒子的左側邊界挨着父節點的左側邊界
• 盒子之間的垂直距離取決於margin，可能會發生外邊距摺疊

外邊距摺疊

外邊距摺疊也不是必定會發生的，下面兩種狀況就不會發生摺疊：

• 根節點元素的盒子不會摺疊（若是這都摺疊，那最外層div的margin就無效了）
• 水平元素之間永遠不會發生外邊距摺疊
• 塊級元素在當前格式化做用域內部（必須是塊級元素，不能是inline-block）
• 清除浮動，沒有padding和border分割（border爲0無效）

外邊距摺疊發生的位置

• 父節點和第一個子節點的margin-top
• 子節點的margin-bottom和下一個相鄰節點的margin-top
• 若是父節點的高度是自動計算的auto，那麼父節點的margin-bottom和其最後一個子節點margin-bottom

總結起來，就是margin可能會在圖中3個地方發生摺疊：

摺疊後margin計算

• margin，都爲正，取最大的那一個
• margin，一正一負，二者相加
• margin，都爲負，取絕對值最大的那一個

如何避免外邊距摺疊？

既然外邊距摺疊發生在圖中三個位置，那麼咱們就看看三個位置不發生摺疊的狀況

通用狀況

• 若是建立了塊級格式化做用域

位置1: 父節點和第一個子節點

• 若是父節點具有border和padding，那麼就不會發生摺疊
• 第一個div 具有clear

位置2: 相鄰節點之間

• 詳細通用狀況

位置3: 父節點和最後一個子節點

• 通用狀況
• 父節點沒有規定高度，height：auto而且min-height：0
• 若是父節點具有border和padding，那麼就不會發生摺疊

注意⚠️

若是子節點中有浮動元素，而且其餘節點具有clear：both/left/right，那麼就會把兄弟元素放在浮動元素的邊界下方，可是依然會發生外邊距摺疊。

行內格式化做用域

如何觸發？

行內元素，好比span等等

內部如何排列？

從左到右，不會發生外邊距摺疊

行內格式化元素的寬度

寬度取決於包含內容的寬度，若是屏幕足夠寬，就會把全部的內容一行展現，若是設置了寬度，可能還有overflow，舉個例子：

<P>Several <EM>emphasized words</EM> appear
<STRONG>in this</STRONG> sentence, dear.</P>
複製代碼

瀏覽器在解析的時候，會解析爲下面的幾個元素：

Anonymous: "Several"
EM: "emphasized words"
Anonymous: "appear"
STRONG: "in this"
Anonymous: "sentence, dear."
複製代碼

可是可能會解析爲一個或者幾個line-box，瀏覽器會作對應的分割，
多是一個line-box：

Several emphasized words appear in this sentence, dear.
複製代碼

多是兩個line-box：

Several emphasized words appear
in this sentence, dear.
複製代碼

也多是三個line-box:

Several emphasized  
words appear in this 
sentence, dear.
複製代碼

具體的分割原理是取決於對應的line-height能不能相互平衡。 固然若是你設置了具體寬度，能夠設置換行等其餘屬性，好比white-space/word-break等，這裏就不作贅述了。

行內格式化元素的高度

inline的高度取決於line-height，可是inline-block類別的（還有table-cell等），取決於margin等。總結起來一句話就是，line-height的高度是盒子頂點到底部之間的距離。

具體計算

• font-size: 每個line-box都有一個屬性font-size，若是沒有設置，使用默認值，或者繼承自父節點的值（pc端谷歌瀏覽器的默認值14px）
• line-height: 規定了line-box的最小高度，也就是line-box的高度

在line-box裏面，vertical-align，其中的baseline，就是經過line-height計算得來的，主要包括下面三個部分：

• A（base-line上面的高度）
• D（base-line下面的高度）
• L（line-height — A - D） 最終baseline上面的高度：A + L/2, baseline下面的高度： D + L/2
  固然，具體的A和D取決於瀏覽器的標準和不一樣的文字的標準，畢竟英文和中文對應的就不同。

參考

一、BFC
二、line-height