[譯]塊狀格式化上下文（BFC）裏一個鮮爲人知的祕密

本文是根據網上一段 2013 年視頻整理出來的，原視頻標題爲 The secrets of block formatting context - Fiona Chan，由 Fiona Chan 分享。

這段視頻主要介紹講了兩塊內容。

1. 何爲塊狀格式化上下文？
2. 如何使用 display: table-cell 避免，使用浮動佈局時元素被意外擠壓折行的問題。

下面將視頻中涉及到的關鍵內容整理以下。

---

何爲塊狀格式化上下文？

格式化上下文（Block Formatting Context，簡稱 BFC）賦予元素一個新的行爲表現能力，由如下之一的屬性聲明建立（W3C CSS2 中的定義）：

• float: left/right
• overflow: hidden/auto/scroll
• display: table-cell、table-caption 等其餘與表格相關的屬性值/inline-block
• position: absolute/fixed

BFC 改變了塊狀元素與浮動元素的交互方式

簡單點說，就是

1. 讓塊狀元素再也不環繞浮動元素佈局了。
2. 塊狀元素視覺上變窄了。

下面展現了沒有 BFC 做用的狀況：

接下來使用 display: table-cell，爲右邊的文本段落建立 BFC：

咱們給了 table cell 元素足夠的寬度，不過不用擔憂，若是橫向的空間不夠，它會自動縮減來適應的。不過在這以前，咱們須要給它一個足夠寬的寬度。

table cell 元素配合浮動佈局的更多例子

1、網格佈局裏的最後一列

上面佈局使用的核心代碼以下（以第二行爲例）：

<style> .line .col { width: 33.33333%; } .line .col:not(:last-child) { float: left; } .line .col:last-child { display: table-cell; width: 10000px; } </style>

<div class="line">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>
複製代碼

一行裏的最後一列的寬度是自適應的，不會由於多了或者少了幾像素就掉到下面去。而且這種佈局方式是能兼容到 IE6+ 的。

2、頁面列布局

兩列

多列

不過須要注意的是，這裏中間黃色的內容區域（main content area）在 HTML 中位於最後的位置，若是放在中間佈局就不正確了。這也是使用這種佈局方式的一個缺點。

<style> aside { float: left; } .sidebar { float: right; } main { display: table-cell; width: 10000px; } </style>

<aside role="complementary">
    Left column
</aside>
<div class="sidebar">
    Right column
</div>
<!-- 結構上，main content area 位於 DOM 結構中的最後一個 -->
<main role="main">
    This is the main content area. And it's stretchy!
</main>
複製代碼

（完）