BFC定義及其應用

浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks，table-cells 和 table-captions），以及 overflow 值不為「 visible 」的塊級盒子，都會建立 bfc（塊格式化上下文）。

首先**如下：

>
.box
.img
.info
pstyle
>
class
="box"
>
class
="img"
>
imagediv
>
class
="info"
>
資訊資訊資訊資訊資訊資訊資訊資訊資訊資訊資訊信p
>
div>

當文字增多時，會打破左右布局的情況：

當然這是因為文字受到了浮動元素的影響，如果我們仍需要保持左右布局的話，可以為p元素建立乙個 bfc，使其消除對外界浮動元素的影響。建立 bfc 的方法在定義時已經說明，所以在此我們可以為info類新增overflow:hidden樣式：

另外 bfc 主要的應用有兩個：解決 margin 摺疊問題，清除浮動。

在css當中，相鄰的兩個盒子（可能是兄弟關係，也可能是祖先關係）的外邊距可以結合成乙個單獨的外邊距。這種合併外邊距的方式稱為摺疊，並且因而所結成的外邊距稱為摺疊外邊距。

摺疊的結果：

兩個相鄰的外邊距都是正數時，摺疊結果取決於它們兩者之間較大的值。

兩個相鄰外邊距都是負數時，摺疊結果取決於他倆者絕對值較大的值。

兩個相鄰外邊距一正一負時，摺疊結果是兩者之和。

產生摺疊的必備條件：margin 必須是鄰接的。

必須滿足以下條件才能證明兩個margin是鄰接的：

以上的條件意味著下列的規則：

以上內容摘選自文獻1

利用clear屬性來閉合元素