前言
本系列主要整理前端面试中需要掌握的知识点。本节介绍对BFC的理解。
一、什么是BFC
- 相关概念：
Box是CSS布局对象的基本单位，一个页面由多个Box组成，就是之前说过的盒子模型。
Formatting context：格式化上下文，是页面中一块渲染区域，有一套自己的渲染规则，决定了其子元素如何定位，以及和其他元素的交互限定区域。 - BFC（Box Formatting context）：块级格式化上下文是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。
- 渲染规则：
（1）内部的盒子会在垂直方向上一个接一个的放置
（2）对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
（3）每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
（4）BFC的区域不会与float的元素区域重叠
（5）计算BFC的高度时，浮动子元素也参与计算
（6）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然 - BFC的目的：
形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素。
二、触发条件
触发BFC的条件包括但不限于：
- 根元素，即body。
- 浮动元素：float值为left、right
- overflow值不为 visible，为 auto、scroll、hidden
- display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
- position的值为absolute或fixed
三、使用场景
1、防止margin重叠（塌陷）
<style>
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align: center;
margin: 100px;
}
</style>
<body>
<p>A</p>
<p>B</p>
</body>
如果两个盒子的margin不一样大的话，距离为大的值。这就是前面讲到的(2）对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。要想避免这种情况，就要把两个p放在不同的BFC中，那么可以把p外面包上一个div，再触发它，就在两个BFC中了。
<style>
div {
overflow: hidden;
}
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align: center;
margin: 100px;
}
</style>
<body>
<p>A</p>
<div>
<p>B</p>
</div>
</body>
2、清除内部浮动
<style>
.box2 {
width: 100px;
height: 100px;
border: 5px solid black;
float: left;
}
</style>
<body>
<div class="box">
<div class="box2"></div>
<div class="box2"></div>
</div>
</body>
由于浮动元素没有高度，因此此时body也是没有高度，但由于（5）计算BFC的高度时，浮动子元素也参与计算。因此要使两个box2在同一个BFC中。触发.box盒子。
.box {
overflow: hidden;
}
3、自适应多栏布局
<style>
body {
width: 300px;
position: relative;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.main {
height: 200px;
background: #fcc;
}
</style>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
每个元素的左边距与包含块的左边界相接触。而（4）BFC的区域不会与float的元素区域重叠，因此要触发.main，生成BFC区域。
.main {
overflow: hidden;
}
