[翻译] 理解 CSS 布局和块级格式上下文

注：本文首发于我的博客 www.ferecord.com/understandi…，如若转载请注明来源。

前言

BFC 的概念始于 CSS2，是个蛮古老的 CSS 话题了，网上也处处能搜到 BFC 的介绍，可是都不够简洁。本文系翻译自 Rachel Andrew 女士的博文 Understanding CSS Layout And The Block Formatting Context，内容足够简洁明了。

本文的目的是介绍一些概念，来帮你加强 CSS 码力。如标题所示，这篇文章主要是讲块级格式上下文（BFC，Block Formatting Context）。你可能没听过这个术语，但只要你曾经使用 过CSS 布局，你就能明白它。理解 BFC 是什么、它如何工做、如何建立一个 BFC 是很是有用的，这些能帮你更好的理解 CSS 布局。

这篇文章里，我会经过几个你会很熟悉的的示例解释 BFC。我还会告诉你一个新的 display 值，当你理解了 BFC 后可能会很须要这个值。

什么是 BFC

一个简单的浮动的示例就能明白 BFC 的行为，在下面的示例中咱们建立一个 box 元素，该元素包裹一段文字和一个浮动的图片。 若是文字内容多的话文字将环绕着整个浮动图片，box 的边框会把他们整个包裹起来。

<div class="outer">
	<div class="float">I am a floated element.</div>
	I am text inside the outer box.
</div>
复制代码

.outer {
      border: 5px dotted rgb(214,129,137);
      border-radius: 5px;
      width: 450px;
      padding: 10px;
      margin-bottom: 40px;
}

.float {
      padding: 10px;
      border: 5px solid rgba(214,129,137,.4);
      border-radius: 5px;
      background-color: rgba(233,78,119,.4);
      color: #fff;
      float: left;  
      width: 200px;
      margin: 0 20px 0 0;
}
复制代码

文字环绕着浮动元素

但若是把一些文字删除，就没有足够的文字去环绕图片（浮动元素）了，同时因为浮动元素脱离文档流，box 元素的边框高度就会随文字的减小而下降。

没有足够的文字，box 元素边框的高度就会低于浮动元素的高度

之因此会发生这种状况是因为当咱们浮动一个元素后，box 元素仍然保持原来的宽度，是文字所占的空间缩短了以给浮动元素腾出位置，这就是为何背景和边框可以看起来包裹住了浮动元素。

咱们一般会使用两种不一样的方式来解决这个问题，一种是使用 clear hack，就是在 文字和图片的下方插入一个 div 并将它的 CSS clear 属性设值为 both。另一种方法是使用 overflow 属性 ，把它设值成非默认值 visible 的值。

.outer {
      overflow: auto;
}
复制代码

使用 overflow: auto 后 box 就能包裹浮动元素了

overflow 之因此可以有效是由于当它的是是非 visible 时会建立一个 BFC，而 BFC 的功能之一就是包裹浮动元素。

BFC 是布局中的迷你布局

你能够把 BFC 当作你页面中的一块小布局，当一个元素被建立成 BFC 后，它其中的全部元素都会被它包裹。正如咱们所见，当 box 元素变成 BFC 后，它其中的浮动元素就再也没能突破它的底部。除此以外，BFC 还有一些有用的功能。

BFC 能够阻挡外边距叠加（margins collapsing）

理解外边距叠加是另一个被低估的 CSS 技巧。在接下来的示例里，我建立了一个背景灰色的 div，这个 div 含有两个段落，div 元素的 margin-bottom 为 40px，同时每一个段落都有 20px 的 margin-top 与 margin-bottom。

.outer {
       background-color: #ccc;
      margin: 0 0 40px 0;
}

p {
      padding: 0;
      margin: 20px 0 20px 0;
      background-color: rgb(233,78,119);
      color: #fff;
}
复制代码

因为 p 元素的边缘与 outer 元素的边缘之间没有任何东西，因此 outer 与 p 的 margin 会叠加，p 会与 outer 的顶部与底部齐平，p 对外的 margin 彷佛与 outer 的 margin 合并了，使咱们没法在段落的上下看到 outer 的灰色背景。

因为 margin collapse（外边距叠加），咱们看到 outer 内部上下没有灰色背景

若是咱们把 outer 元素变成 BFC，它就能够包裹住 p 以及 p 的 margin，外边距不会发生叠加，outer 元素内部就会出现由 p 元素的 margin 顶出来的上下灰色背景。

.outer {
       background-color: #ccc;
      margin: 0 0 40px 0;
      overflow: auto;
}
复制代码

创建 BFC 后，外边距再也不叠加

一旦 BFC 创建，它就会阻止它内部的元素逃离突破它。

一个 BFC 会中止去环绕浮动元素

你可能很熟悉 BFC 的这个特性，咱们在有浮动元素的列类型布局中经常使用到。若是一个元素建立了 BFC，它就不会去环绕（或者说包装？）任何浮动元素。看下面这个示例：

<div class="outer">
      <div class="float">I am a floated element.</div>
      <div class="text">I am text</div>
</div>
复制代码

class 名为 float 的元素将会浮动在布局的左侧，class 名为 text 的 div 元素将会在它后面并环绕它。

文字环绕着浮动元素

咱们能够经过给 text 元素创建 BFC 来阻挡这种环绕行为。

.text {
      overflow: auto;
}
复制代码

text 元素创建 BFC 后就再也不环绕浮动元素了

该方法也是咱们建立浮动布局的基本方式。还需注意的是浮动一个元素时也会给该元素建立 BFC，也就是说此时 .float 与 .text 都是 BFC，这也是不管右侧高度低于仍是高于左侧二者都不会互相围绕的缘由。

建立一个 BFC 的经常使用方式

除了使用 overflow 外， 一些其余的 CSS 属性也能够建立 BFC，好比上面咱们所见，浮动一个元素也能够为该元素建立 BFC，浮动元素会包裹它内部的全部元素。还有如下几种方式能够建立 BFC：

使用 position: absolute 或者 position： fixed。

使用 display: inline-block、display: table-cell 或者 display: table-caption，其中 table-cell 和 table-caption是表格相关 HTML 元素的对应默认 CSS 值，因此当你建立表格每一个表格单元都会自动建立 BFC。

另外当使用 multi-column layout （多列布局）时使用 colum-span: all 也能够建立 BFC。Flex（弹性） 和 Grid（网格） 布局中的元素也会自动建立相似 BFC 的机制，只是它们被称为 Flex Formatting Context（弹性格式上下文）和 Grid Formatting Context(网格格式上下文)。这反映了它们所参与的布局类型。一个 Block Formatting Context（块级格式上下文）代表他内部的元素参与了块级布局，一个 弹性格式上下文意味着它内部的元素参与了弹性布局。在实践中，这几种布局的结果是类似的，浮动元素会被包裹、外边距不会叠加。

建立 BFC 的新方式

使用 overflow 或其余的方法建立 BFC 时会有两个问题。第一个是这些方法自己是有自身的设计目的的，因此在使用它们建立 BFC 时会可能产生反作用。例如使用 overflow 建立 BFC 后在某些状况下你可能会看到出现一个滚动条或者元素内容被削减。这是因为 overflow 属性是设计被用来让你告诉浏览器如何定义元素的溢出状态的。浏览器执行了它最基本的定义。

另外一个问题是，即便在没有出现反作用的状况下，使用 overflow 也可能会使另外一个开发人员感到困惑。他们可能会各类猜测：这里为啥要把 overflow 的值设为 auto 或 scroll？原开发人员作这个意义何在？原开发人员是想让这里出现滚动条吗？

最安全的作法应该是建立一个 BFC 时不会有任何反作用，它内部的元素都安安全全的呆在这个小布局里，这种方法不会引发任何意想不到的问题，也可让开发者意图清晰。CSS 工做组也十分认同这种想法，因此他们定制了一个新的属性值：display: flow-root。

你可使用 display: flow-root 安全的建立 BFC 来解决本文中提到的各类问题，包括：包裹浮动元素、阻止外边距叠加、阻止环绕浮动元素。

caniuse 上 display: flow-root 各浏览器支持状况

浏览器对该属性值的支持目前仍是有限的，若是你以为这个属性值很方便，请投票去让 Edge 也支持它。不过不管如何，你如今应该已经理解了什么是 BFC，以及如何使用 overflow 或其余方法来包裹浮动，以及知道了 BFC 能够阻止元素去环绕浮动元素，若是你想使用弹性或网格布局能够在一些不支持他们的浏览器中使用 BFC 的这些特性作降级处理。

理解浏览器如何布置网页是很是基础的。 虽然有时看起来可有可无，可是这些小知识能够加快建立和调试 CSS 布局所需的时间。