块级格式上下文（Block Formatting Context）是CSS中一个相对冷门的概念，以至于很多从事前端开发多年的程序员对它也不是很熟悉。网上有很多关于BFC的文章，大都是对一些基本概念的解释，辅以一些简单的例子，读完常常感觉自己已经明白了，但是在实际项目中遇到还是会很疑惑。
BFC定义
Block Formatting Context(BFC)是一个独立的渲染区域，只有Block-Level box参与，它规定了内部的Box如何布局，并且与这个区域外部毫不相干。
如何生成BFC
- 设置浮动
- 绝对定位元素
- inline-block
- table-cell
- table-caption
- 设置overflow且值不为visible
- display:flex 或者 display:inline-flex
BFC布局规则
- 内部的块级元素会在垂直方向一个接一个地放置。
- 块级元素垂直方向的距离由margin决定。属于同一个BFC的两个相邻块级元素的margin会发生重叠。
- 每个块级元素的margin box的左边，与包含块border box的左边相接触（对于从左往右的格式化，否则相反）。即使存在浮动也是如此（虽然盒子内的文字会环绕浮动元素），除非该块级元素形成了一个新的BFC。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算。
使用BFC防止外边距塌陷
上一节提到，在同一个BFC中的两个相邻块级元素的外边距会发生塌陷，如下边这个例子：
<div class="container">
<p>Sibling 1</p>
<p>Sibling 2</p>
<div class="newBFC">
<p>Sibling 3</p>
</div>
</div>
div.container是一个BFC，里面有三个块级元素，设置了相同的margin，其中第三个块级元素外面套了一层div，但是未设置任何样式。初始的CSS样式如下：
.container {
background-color: red;
overflow: hidden;
}
p {
margin: 10px 0;
background-color: lightgreen;
}
初始结果如下：
边距塌陷
可以看到相邻两个p元素间的间距为10px而不是20px，可见发生了外边距塌陷。如果要避免外边距塌陷，只需要使第三个p元素的外部容器形成一个新的BFC：
.newBFC {
overflow : hidden; /* 形成新的 BFC */
}
修改后的效果为：
防止边距塌陷
使用BFC包裹浮动元素
当容器中包含有浮动元素时，由于浮动元素会脱离页面的正常流，容器的高度会塌陷。解决容器高度塌陷主要有两种方法，一种是通过clear fix，另一种就是使容器形成块级格式上下文。
BFC解决容器高度塌陷
使用BFC避免文字环绕
我们知道，页面中的文字会环绕在浮动元素周围，但是有些时候我们想避免文字环绕的出现，例如以下这种情况：
文字环绕
要实现图二的效果，同样可以利用BFC，不过首先我们需要理解文字环绕的形成机理。
<div class="container">
<div class="floated">
Floated div
</div>
<p>
Quae hic ut ab perferendis sit quod architecto,
dolor debitis quam rem provident aspernatur tempora
expedita.
</p>
</div>
这段HTML形成的效果如下：
浮动元素
可以看到，尽管浮动元素的存在导致了文字的偏移，p元素的左侧依然紧挨着容器左侧。当p元素中的文字增加到超出浮动元素高度时，超出部分的文字不再需要为浮动元素“让位”，便会重新从p元素的左侧开始显示，这样就形成了文字环绕的效果。如果想避免文字环绕，我们需要让整个p元素为浮动元素“让位”，而不仅仅是p元素中的文字。回忆BFC的布局规则中的一条：
每个块级元素的margin box的左边，与包含块border box的左边相接触（对于从左往右的格式化，否则相反）。即使存在浮动也是如此（虽然盒子内的文字会环绕浮动元素），除非该块级元素形成了一个新的BFC。
从这一条规则可以得出结论：如果p元素形成了一个新的BFC，那么它就不再需要紧挨容器的左边缘。
因此上面这个例子中，想避免p元素环绕浮动元素，只需要为p元素添加overflow: hidden，形成一个新的块级格式上下文。
使用BFC实现多列布局
在实现多列布局时，通常只需要将每一列浮动，并保证所有列（包括间距）的总宽度正好等于页面宽度。可以在实践中发现，多列布局的最后一列在某些浏览器中会换到下一行显示，这是由于多列布局中的列宽和间距通常是用百分比表示，而浏览器根据百分比计算盒模型宽度时四舍五入的方式有所不同，因此造成了总列宽大于了容器的宽度。
为了避免这种情况的出现，最后一列可以不适用浮动，而是通过形成一个新的BFC实现和浮动类似的效果。
HTML代码如下：
<div class="container">
<div class="column">column 1</div>
<div class="column">column 2</div>
<div class="column">column 3</div>
</div>
CSS代码如下：
.column {
width: 31.33%;
background-color: green;
float: left;
margin: 0 1%;
}
/* 最后一列形成新的BFC */
.column:last-child {
float: none;
overflow: hidden;
}
最终效果如下：
多列布局
当然这种方法并不一定是最优的解决方案，只是以此说明BFC的一种可能的应用。
参考资料
[1] Understanding Block Formatting Contexts in CSS
[2] Block formatting context
网友评论