CSS进阶04-块格式化上下文BFC
CSS进阶04-块格式化上下文BFC
（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）
（注2：更多内容请查看我的目录。）
1. BFC定义
BFC的英文全称是：Block Formatting Contexts，直译为“块格式化上下文”。
BFC是Web页面的可视化CSS渲染的部分，是块级盒布局发生的区域，也是浮动元素与其他元素交互的区域。
2. BFC生成
CSS2.2文档中注明，满足下列条件之一，会为其内容建立新的块格式化上下文BFC：
- 浮动，即float的值不为none。
- 绝对定位的元素，position的值为absolute或fixed
- 不是块盒的块容器。诸如行内块inline-blocks，表单元格table-cells和表标题table-captions。 即 display的值为table-cell, table-caption, inline-block中的任何一个。
- overflow值不为visible的块盒。(除非该值被传播到视口viewport)
然后，MDN中注明，如下条件会产生BFC（这里我直接放英文原版）：
A block formatting context is created by one of the following:
- the root element or something that contains it
- floats (elements where
floatis notnone) - absolutely positioned elements (elements where
positionisabsoluteorfixed) - inline-blocks (elements with
display: inline-block) - table cells (elements with
display: table-cell, which is the default for HTML table cells) - table captions (elements with
display: table-caption, which is the default for HTML table captions) - anonymous table cells implicitly created by the elements with
display: table,table-row,table-row-group,table-header-group,table-footer-group(which is the default for HTML tables, table rows, table bodies, table headers and table footers, respectively), orinline-table - block elements where
overflowhas a value other thanvisible display: [flow-root](https://drafts.csswg.org/css-display/#valdef-display-flow-root)- elements with
contain: layout,content, orstrict - flex items (direct children of the element with
display: flexorinline-flex) - grid items (direct children of the element with
display: gridorinline-grid) - multicol containers (elements where
column-countorcolumn-widthis notauto, including elements withcolumn-count: 1) column-span: allshould always create a new formatting context, even when thecolumn-span: allelement isn't contained by a multicol container (Spec change, Chrome bug).
发现新增了很多情况。这里只讨论CSS2.2中所列条件，当然CSS2.2中root默认也会生成BFC（不过我一直没找到文档中的出处，如果有找到的同学还请不吝赐教），但是body默认是不生成BFC的。
3. BFC渲染规则
CSS2.2中规定BFC具有如下特征：
- 在一个块格式化上下文中，盒从包含块顶部开始一个接一个地垂直摆放。两个同胞盒间的垂直距离取决于 margin 属性。同一个块格式化上下文中的相邻块级盒的垂直外边距将折叠。
- 在一个块格式化上下文中，每个盒的左外边缘紧贴包含块的左边缘（从右到左的格式里，则为盒右外边缘紧贴包含块右边缘），即使有浮动参与也是如此（尽管盒里的行盒可能由于浮动而收缩），除非盒创建了一个新的块格式化上下文（在这种情况下盒子本身可能由于浮动而变窄）。
下面，我们详细举例说明这两条规则：
3.1 在一个块格式化上下文中，盒从包含块顶部开始一个接一个地垂直摆放。两个同胞盒间的垂直距离取决于 margin 属性。同一个块格式化上下文中的相邻块级盒的垂直外边距将折叠。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.1-1</title>
<style>
div {
background-color: green;
height: 30px;
margin: 15px;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>
3.1-1
如图，三个div生成的块盒在root生成的BFC下，其包含块是body的content box（就是body的content edge生成的块），三个div块从body的content box顶部往下依次排列。三者间被margin隔开。但是由于三者处于同一个BFC，margin产生了折叠（折叠的情况比较复杂，我会开单章详细说明），间距不是30px而是15px。
3.2在一个块格式化上下文中，每个盒的左外边缘紧贴包含块的左边缘（从右到左的格式里，则为盒右外边缘紧贴包含块右边缘），即使有浮动参与也是如此（尽管盒里的行盒可能由于浮动而收缩），除非盒创建了一个新的块格式化上下文（在这种情况下盒子本身可能由于浮动而变窄）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.2-1</title>
<style>
div {
background-color: green;
height: 30px;
margin: 15px;
}
.fl {
float: left;
}
.div4 {
background-color: red;
height: 20px;
}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div class="fl div4">float-left</div>
<div id="div3">div3</div>
</body>
</html>
3.2-1
可以看到，id为div1，div2和div3的三个div生成的块盒在root生成的BFC下，每个盒的左外边缘紧贴其包含块(body的content box)的左边缘。内容为float-left的div虽然把div3内容向右挤开了一段距离（原因是浮动导致id为div3的盒内的行盒收缩），但是id为div3的盒的左外边缘仍然紧贴其包含块的左边缘。
不过值得注意的是此时内容为float-left的块盒由于浮动脱离了标准流，此时不再与div2的margin发生折叠，所以对于3.1的折叠发生条件，应该至少还要加一个前提，就是相邻块级盒需要在标准流内。
另外，我们看看，如果此时使id为div3的盒生成新的BFC呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.2-2</title>
<style>
div {
background-color: green;
height: 30px;
margin: 15px;
}
.fl {
float: left;
}
.div4 {
background-color: red;
height: 20px;
}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div class="fl div4">float-left</div>
<div id="div3" class="fl">div3</div>
</body>
</html>
3.2-2
可以看到div3由于浮动生成了新的BFC，会导致盒的左外边缘不再紧贴其包含块的左边缘，并且由于浮动，其本身宽度变窄了。
4. BFC用途
4.1 BFC可以阻止元素被浮动元素覆盖（防止高度坍塌）。
盒的宽高其实是有着很复杂的计算方法，这一点我们在CSS进阶系列后面的文章中详细说明。这里我们来看一个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4.1-1</title>
<style>
.div1 {
height: 50px;
background-color: gray;
}
.outer {
border: 3px solid red;
}
.fl {
float: left;
}
</style>
</head>
<body>
<div class="outer">
outer
<div class="div1 fl">float-left</div>
</div>
</body>
</html>
4.1-1
我们发现outer的盒高度竟然没有其所包含的float-left的盒高度高，产生了高度塌陷。这是什么原因呢？这是因为对于
Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'
的高度，有
Only children in the normal flow are taken into account (i.e., floating boxes and absolutely positioned boxes are ignored, and relatively positioned boxes are considered without their offset).
就是说对于标准流中的块级非替换元素，如果其overflow最终计算结果为visible，那么高度只会考虑其在标准流中的子元素（比如，移动和绝对定位的盒子是会被忽略的，相对定位的盒子只会考虑其未被定位前的位置）。
那么，BFC如何清除浮动呢？看下面这个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4.1-2</title>
<style>
.div1 {
height: 50px;
background-color: gray;
}
.outer {
border: 3px solid red;
}
.fl {
float: left;
}
</style>
</head>
<body>
<div class="outer fl">
outer
<div class="div1 fl">float-left</div>
</div>
</body>
</html>
4.1-2
可以看到，如果设置outer的float属性不为none，会导致outer生成新的BFC，然后outer盒的在高度上能够包裹住float-left了。这是什么原理呢？
the height of an element that establishes a block formatting context is computed as follows: If it only has inline-level children, the height is the distance between the top of the topmost line box and the bottom of the bottommost line box. If it has block-level children, the height is the distance between the top margin-edge of the topmost block-level child box and the bottom margin-edge of the bottommost block-level child box. Absolutely positioned children are ignored, and relatively positioned boxes are considered without their offset. Note that the child box may be an anonymous block box. In addition, if the element has any floating descendants whose bottom margin edge is below the element's bottom content edge, then the height is increased to include those edges. Only floats that participate in this block formatting context are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.
这短话详细列举了生成BFC元素的高度计算规则，翻译成中文如下：
建立块格式化上下文的元素的高度按如下所述计算： 如果该元素只有行内级子元素，其高度为最上行盒的顶部到最下行盒的底部的距离。 如果该元素有块级子元素，其高度为最上块级子盒的上外边距边缘到最下块级子盒的下外边距边缘的距离。 绝对定位子元素会被忽略，相对定位盒不需要考虑其位移。注意子盒可能是匿名块盒。 此外，如果该元素有下外边距边缘低于该元素下内容边缘的浮动子元素，那么高度将增大来包含那些边缘。只有参与本块格式化上下文的浮动才考虑在内，比如，在绝对定位后代中的或者其他浮动中的浮动就不考虑。
4.2 BFC可以用来防止margin折叠。
看下面这个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4.2</title>
<style>
.div1 {
margin: 10px;
height: 30px;
background-color: green;
}
.div2 {
margin: 10px;
height: 30px;
background-color: blue;
}
.hidden {
overflow: hidden;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="outer">
<div class="div2">div2</div>
</div>
<div class="div1">div1</div>
<div class="outer hidden">
<div class="div2">div2</div>
</div>
</body>
</html>
4.2
可以看到，div2即使包含在另一个块盒中，但是如果与div1在同一个BFC且相邻，一样会产生margin折叠。这时如果让div2处于一个新的BFC下，则其与处于另一个BFC下的div1不再会有margin折叠。
4.3 多栏布局(更多内容可以参考BFC与多列布局)
4.3.1 两栏布局
特点：侧边栏宽度固定，内容栏可以根据浏览器宽度自适应。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4.3.1</title>
<style>
body {
width: 100%;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: grey;
}
.content {
height: 200px;
overflow:hidden;
background: blue;
}
</style>
</head>
<body>
<div class="aside"></div>
<div class="content"></div>
</body>
</html>
4.3.1
4.3.2 三栏布局
特点：两侧宽度固定，中间内容栏可以根据浏览器宽度自适应。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4.3.2</title>
<style>
body {
width: 100%;
}
.left {
width: 100px;
height: 150px;
float: left;
background: grey;
}
.content {
height: 200px;
overflow:hidden;
background: blue;
}
.right {
width: 100px;
height: 150px;
float: right;
background: purple;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="content"></div>
</body>
</html>
4.3.2
这里需要注意的是，如果body部分写成如下顺序
<body>
<div class="left"></div>
<div class="content"></div>
<div class="right"></div>
</body>那么，右边栏会被挤到下边。这是因为当“非float的元素”和“float的元素”在一起的时候，如果非float元素在先，则按照bfc规则，下一个盒子会换行，那么float的元素生成的盒子会在新的一行进行浮动。所以要将right放在content元素前面。
参考
https://www.w3.org/TR/CSS22/visuren.html#visual-model-intro
https://www.w3.org/TR/CSS2/visuren.html
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
CSS规范 > 9 视觉格式化模型 Visual Formatting Model