CSS布局中有一些概念是你一旦理解它那么就会极大的提升你的CSS技能的。这篇文章是关于块级格式化上下文的BFC。也许你从未听说过这个术语，但是如果你曾经用CSS做过布局，那么你也许知道它是什么。理解什么是BFC，它为什么会起作用以及如何创建一个有用的BFC可以帮助你理解CSS布局是怎样工作的。
在这篇文章中，我将通过一些你可能熟悉的例子解释什么是BFC。我将向你展示一个新的概念，当你明白什么是BFC以及你为什么需要它的时候，它才真正有意义。
什么是 BFC?
最容易明白一个BFC表现的是一个浮动的例子。在下面的例子中有一个盒模型，其中包含一张左浮动的图和一些文字。如果我们有大量的文字，它环绕在浮动的图像上，则边框会围绕着整个区域。
图1：文本环绕着浮动元素
如果删除了一些文本，那么文本就不足以环绕图像，并且因为图片浮动脱离了文档流，边框就会在图片下面并且上升到文本的高度。
图2：没有足够的文本，边框就不能到达浮动元素所期望的高度
这是因为当我们在浮动一个元素时，文本所在的盒模型仍然是固定的高度，而因浮动元素而缩短的空间是文本的行框。这就是为什么背景和边框会出现在浮动元素的后面。
这里有两种我们通常修复这种问题的方式。一种是使用清除浮动clearfix hack1，它是通过在文本和图片下面插入一个元素并且设置清除两侧浮动来起作用的。另一种方式是使用overflow属性，使用其他的值来代替默认的visible。
图3：使用 overflow:auto 使盒模型中包含浮动
overflow属性起作用的原因是使用任何一个其他值来代替初始值visible，从而创建一个BFC。即BFC的一个特点就是它包含浮动。
BFC 布局是一个迷你布局
你可以认为BFC在网页中是一个迷你布局。一旦一个元素创建的BFC，所有东西都包含在里面了。正如我们所看到的，它包含浮动元素使其不再超出盒子底部。同时BFC也产生了一些其他有用的行为。
BFC 防止外边距塌陷
理解外边距塌陷是另一个被低估的CSS技能。在下一个例子中，有一个灰色背景的div。这个div中有两个段落。外层div有40px的下边距；每一个段落也分别有20px的上下边距。
由于p元素的外边距和外层div的外边距之间没有任何东西而导致它们折叠，使p段落最后会与盒子的顶部和底部平齐。所以在p段落的上面和下面我们没有看到任何灰色。
图4：外边距塌陷导致在盒子的顶部和底部看不到任何灰色
如果我们对盒模型应用BFC，那么它将包括段落和边距并使之不会塌陷，所以我们将在边距的后面看到灰色的背景。
图5：使用BFC外边距将不会塌陷
BFC再一次使元素包含在其中，阻止其外边距塌陷或超出盒模型。
BFC 阻止内容环绕浮动元素。
你也会熟悉BFC这种行为，就是它如何在使用浮动的多列布局中工作的。如果一个项目创建了BFC，那么它将不会环绕任何浮动元素，比如在下面的示例中有这样的标记：
带有float类的元素开始浮动，然后div中的文本会环绕在浮动元素周围。
图6：文本环绕浮动元素
那么可以使用通过对文本使用BFC来阻止其环绕行为。
图7：div 包含的文本使用了 BFC 使之停止环绕
这是我们创建多列浮动布局常用的方式。浮动一个元素同时也为另一个元素创建了BFC，所以当右边的元素比左边高时，创建的列也不再尝试环绕对方。
还有什么方式可以创建 BFC?
除了使用overflow属性以外，其他一些CSS属性也可以创建BFC。正如我们看到的，浮动一个元素也创建了BFC，所以浮动项目将包含里面的任何元素。
其他方式还有使用position: absolute，，使用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布局的时间。
最后
“相信有很多想学前端的小伙伴，今年年初我花了一个月整理了一份最适合2018年学习的web前端干货，从最基础的HTML+CSS+JS到移动端HTML5等都有整理，送给每一位前端小伙伴，53763，1707这里是小白聚集地，欢迎初学和进阶中的小伙伴。”
祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。
