塊級格式化上下文 (block formatting contexts) 觸發條件探讨

Block Formatting Context （塊格式化上下文）是 W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其内容進行定位，以及與其他元素的關系和互相作用。

在建立了 Block Formatting Context 的元素中，其子元素會一個接一個地放置。垂直方向上他們的起點是一個包含塊的頂部，兩個相鄰的元素之間的垂直距離取決于 'margin' 特性。在 Block Formatting Context 中相鄰的塊級元素的垂直邊距會折疊（collapse）。

以上是關于BFC的相關概念和一點解釋，引自：w3help

BFC的用處：

非 BFC 元素，會忽略其添加 float 的子元素的高度值；其上下邊距會與子元素的邊距産生折疊；其内、外部的float元素會對自身以及其子元素布局産生影響。

觸發 BFC 是解決這三個問題的有效方式。這也就是為何可用overflow:hidden來清除浮動等問題的原因。

觸發BFC的條件：

1. "float"的值不是"none"
2. "overflow"的值不是"visible"
3. "display"的值是"table-cell"
4. "table-caption",或"inline-block"
5. "position"的值既不是"static"也不是"relative"

以上是網絡上普遍的答案，但并未給出具體觸發後相關元素的特點，以及該如何使用。

以下讨論均建立在下面的例子的基礎上

<div id="c1"></div>
<div id="c2">
    <div id="c21">Text 1</div>
    <div id="c22">Text 2</div>
    <div id="c23">Text 3</div>
    <div id="c24">Text 4</div>
    <div id="c25">Text 5</div>
</div>
           

  相關樣式如下：

#c1{margin:20px;background:red;height:80px;width:30px;float:left;}
#c2{margin:20px;background:dimgray;}
#c21,#c22,#c23,#c24,#c25{margin:10px;background:green;width:100px;height:30px;}
#c22,#c24{background:gold;}      

  這段代碼運作後，如下截圖：

  可發現，#c1 浮動影響到了 #c2 的文字布局，并且遮擋了 #c2 的部分區域

關于float觸發

現對 #c2 添加 float 屬性：float:left;

運作後，如下截圖：

可發現，#c2 已經拜托了 #c1 的幹擾。#c2 與 #c1之間的間距由 #c2 和 #c1的 margin 值之和決定。

現将 #c1 和 #c2 的 float 屬性都去除，運作後結果如下：

發現，#c1 和 #c2 之間的距離僅為 20px，并不是二者的距離隻和。#c2 内部的第一個div 距離上邊距的margin值被忽略（其實是重疊在#c2的外邊框中）。

現将 #c1 的 float 屬性去除，保留#c2 的 float 屬性，運作後結果如下：

此時所有間距都變為正常值。這就是float建立 BFC 的好處：可以将本元素的内外邊距的折疊均變為正常。而其他的觸發條件均不能控制自身外邊距的折疊。

關于其他觸發：

其他觸發，均不會影響自身外邊距的折疊。也就是說，在上面的例子中，#c1 與 #c2 的間距隻能保持為 20px。