理解 CSS 布局和块级格式化上下文

CSS布局中有一些概念是你一旦理解它那么就会极大的提高你的 CSS 技能的。这篇文章是关于块级格式化上下文的 BFC 。也许你从未据说过这个术语，可是若是你曾经用 CSS 作过布局，那么你也许知道它是什么。理解什么是 BFC ，它为何会起做用以及如何建立一个有用的 BFC 能够帮助你理解 CSS 布局是怎样工做的。

在这篇文章中，我将经过一些你可能熟悉的例子解释什么是 BFC 。我将向你展现一个新的概念，当你明白什么是 BFC 以及你为何须要它的时候，它才真正有意义。

什么是 BFC?

最容易明白一个 BFC 表现的是一个浮动的例子。在下面的例子中有一个盒模型，其中包含一张左浮动的图和一些文字。若是咱们有大量的文字，它环绕在浮动的图像上，则边框会围绕着整个区域。

<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;
}

图1：文本环绕着浮动元素

若是删除了一些文本，那么文本就不足以环绕图像，而且由于图片浮动脱离了文档流，边框就会在图片下面而且上升到文本的高度。

图2：没有足够的文本，边框就不能到达浮动元素所指望的高度

这是由于当咱们在浮动一个元素时，文本所在的盒模型仍然是固定的高度，而因浮动元素而缩短的空间是文本的行框。这就是为何背景和边框会出如今浮动元素的后面。

这里有两种咱们一般修复这种问题的方式。一种是使用清除浮动 clearfix hack [1]，它是经过在文本和图片下面插入一个元素而且设置清除两侧浮动来起做用的。另外一种方式是使用 overflow属性，使用其余的值来代替默认的 visible 。

.outer {
  overflow: auto;
}

图3：使用 overflow:auto 使盒模型中包含浮动

overflow 属性起做用的缘由是使用任何一个其余值来代替初始值 visible ，从而建立一个 BFC 。即 BFC 的一个特色就是它包含浮动。

BFC 布局是一个迷你布局

你能够认为 BFC 在网页中是一个迷你布局。一旦一个元素建立的 BFC ，全部东西都包含在里面了。正如咱们所看到的，它包含浮动元素使其再也不超出盒子底部。同时 BFC 也产生了一些其余有用的行为。

BFC 防止外边距塌陷

理解外边距塌陷是另外一个被低估的 CSS 技能。在下一个例子中，有一个灰色背景的 div 。这个 div 中有两个段落。外层 div 有 40px 的下边距；每个段落也分别有 20px 的上下边距。

.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 元素的外边距和外层 div 的外边距之间没有任何东西而致使它们折叠，使 p 段落最后会与盒子的顶部和底部平齐。因此在 p 段落的上面和下面咱们没有看到任何灰色。

图4：外边距塌陷致使在盒子的顶部和底部看不到任何灰色

若是咱们对盒模型应用 BFC ，那么它将包括段落和边距并使之不会塌陷，因此咱们将在边距的后面看到灰色的背景。

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

图5：使用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>

带有 float 类的元素开始浮动，而后 div 中的文本会环绕在浮动元素周围。

图6：文本环绕浮动元素

那么可使用经过对文本使用 BFC 来阻止其环绕行为。

.text {
  overflow: auto;
}

图7：div 包含的文本使用了 BFC 使之中止环绕

这是咱们建立多列浮动布局经常使用的方式。浮动一个元素同时也为另外一个元素建立了 BFC ，因此当右边的元素比左边高时，建立的列也再也不尝试环绕对方。

还有什么方式能够建立 BFC?

除了使用 overflow 属性之外，其余一些 CSS 属性也能够建立 BFC 。正如咱们看到的，浮动一个元素也建立了 BFC ，因此浮动项目将包含里面的任何元素。

其余方式还有使用 position: absolute ， position: fixed ，使用 display: inline-block， display: table-cell 及 display: table-caption ，其中 table-cell 以及 table-captions是 HTML 元素的默认属性，因此若是有一个 table 数据，那么它的每一个格子都将建立 BFC 。 column-span: all 多被使用在多列布局中。 Flex 和 Grid 项目也会建立相似的 BFC ，它们分别被描述为 Flex 格式化上下文和 Grid 格式化上下文，这分别反映了不一样的布局类型。 BFC 表示块级布局， FFC 表明 Flex 布局。在实际项目中结果是同样的，都是包含浮动而且外边距不会发生塌陷。

建立 BFC 新方式

使用 overflow 属性或其余方式建立 BFC 有两个问题。第一，这些方法对于它们真正的用途会产生反作用。使用 overflow 属性建立一个 BFC 而且包含浮动，可是在某些状况下你可能会发现获得一个了没必要要的滚动条，或者阴影被剪掉了。这是因为 overflow 属性本质上是告诉浏览器在溢出的状况下应该怎样作—产生滚动条或者剪掉元素。浏览器实际上作了你让它作的工做！

即便在没有任何反作用的状况下，使用 overflow 属性也可能会让另外一个开发人员感到困惑。为何 overflow 属性设置为自动或滚动？开发者最初的目的是什么？他们但愿在这个组件上使用滚动条吗？怎样建立一个 BFC 是行之有效的？应该是没有形成其余行为而创造出迷你的布局， 或者保证是在安全范围内的，它将不会引起任何意想不到的问题，而且开发人员的意图也很清晰。 CSS 工做组认为有一个很方便的新的 display 属性: flow-root 。

你能够在任何状况下使用 display: flow-root ，它将会建立一个新的有用的 BFC ，它包含浮动，阻止外边距塌陷，而且阻止元素环绕浮动。

你能够在下面的 CodePen 中看到上述全部的这些， 若是你的浏览器支持 display: flow-root的话，如目前流行的火狐或谷歌浏览器。

图8：支持 display: flow-root 属性的浏览器

支持这个属性的浏览器是有限的，但若是你认为这将是方便的，你能够去支持它。然而，即便目前你不可以在你的代码很流利的使用 flow-root 功能，但你如今明白了 BFC 是什么，以及当你使用 overflow 属性或其它方法包含浮动的时候你明白了你在作什么。了解这样一个事实：好比 BFC 将阻止元素环绕浮动，这在不支持的浏览器中想建立 Flex 或 Grid 布局的时候都是很是有用的。

你已经了解了一些关于浏览器如何布置 Web 页面的基本原理，这看起来彷佛可有可无，但却能够加快建立和调试 CSS 布局的时间。

原文连接：https://www.jianshu.com/p/5ab...