1. 什么是BFC？
BFC全称为Block Formatting Context，即“块级格式化上下文”，它是页面中相对独立的一块渲染区域，它决定了内部的子元素如何进行摆放和定位，以及区域内部元素和区域外部元素之间的相互作用关系。
2. BFC有什么特点？
当一个元素容器创建BFC后，主要有以下表现特点：
- BFC可以包含浮动元素（闭合浮动）
- BFC所确定的区域不会与外部浮动元素发生重叠
- 位于同一BFC下的相邻块级子元素在垂直方向上会发生margin重叠
- 位于不同BFC下的相邻元素之间不会发生margin重叠
将以上特点一言以蔽之，即BFC在页面上是一个封闭的区域，如同“结界”一般。即便是内部的浮动元素也无法脱离该区域。该区域内部的子元素无法影响区域外部，同时也不受外部影响。
3. 如何触发/创建BFC？
若某个元素满足以下任一条件，则会对其创建BFC：
- <html>根元素
- float的值不为none
- overflow的值为auto、scroll或hidden
- display的值为table-cell、table-caption或inline-block
- position的值为fixed或absolute
4. BFC的常见用途
既然BFC有如上特点，那么该如何将其利用到我们日常的布局中呢？一般来说，BFC的常见用途有如下三个：
闭合浮动
由于BFC可以包含浮动元素，所以当一个元素容器内部存在浮动元素时，为了防止容器高度“坍塌”，可以对容器创建BFC：
#container {
overflow: auto; /* 创建BFC */
}
阻止margin重叠
假设有如下代码：
/* HTML代码 */
<div id="box1">我是box1</div>
<div id="box2">我是box2</div>
/* CSS代码 */
#box1 {
margin-bottom: 20px;
background-color: lightskyblue;
}
#box2 {
margin-top: 20px;
background-color: orange;
}
由于box1和box2处于同一上下文，所以在垂直方向上会发生margin重叠：
margin重叠
为了阻止两者发生margin重叠，可以为box2添加一个BFC容器：
/* HTML代码 */
<div id="box1">我是box1</div>
<div id="bfc">
<div id="box2">我是box2</div>
</div>
/* CSS代码 */
#bfc {
overflow: auto; /* 创建BFC */
}
这样一来，box1和box2就属于两个不同的上下文，也就不会发生margin重叠了：
BFC阻止margin重叠
不过需要注意的是，不要错误地以为BFC容器也能与box1之间发生margin不叠加；事实上由于此时变成了BFC容器与box1在同一上下文中，所以BFC容器仍会与box1发生margin重叠，如：
#bfc {
overflow: auto; /* 创建BFC */
margin-top: 20px;
}
则有：
BFC容器与box1发生margin重叠
自适应流体布局
BFC最强大的用途其实是用于自适应流体布局，这是基于BFC所确定的区域不会与外部浮动元素发生重叠的特性实现的：
假设我们需要创建一个左侧宽度固定为200px，右侧宽度自适应的两列布局，一般情况下有如下解决方案：
/* HTML代码 */
<div id="layout">
<div id="left"></div>
<div id="right"></div>
</div>
/* CSS代码 */
#layout{
overflow: auto; /* 创建BFC闭合浮动 */
}
#left {
width: 200px;
float: left;
}
#right {
margin-left: 200px;
}
虽然这个方案简单有效，但是有一个缺点，那就是需要在#right中设定margin-left值来为左侧留出空间；那如果要修改左侧的宽度，相应地也要修改margin-left，这样就会很麻烦。
但如果利用BFC的特点，将#right中的代码改为：
#right {
overflow: auto; /* 创建BFC */
}
这样就既保留了right原有的流体特性（默认占满父元素宽度），也通过BFC根据左侧浮动元素的尺寸对右侧栏的宽度进行自动剪裁，从而完成了自适应的布局效果。
网友评论