[译]块状格式化上下文（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 元素配合浮动布局的更多例子

一、网格布局里的最后一列

上面布局使用的核心代码如下（以第二行为例）：

<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+ 的。

二、页面列布局

两列

多列

不过需要注意的是，这里中间黄色的内容区域（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>

（完）