[译]块状格式化上下文（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>
复制代码

（完）