前言
在CSS布局中，BFC是一个极其重要的概念，尽管它可能有些晦涩难懂。然而，理解并掌握BFC是必不可少的，因为它能够解决许多常见的布局问题。
简而言之，BFC定义了一个独立的渲染区域，在这个区域内的元素布局不受外部影响。这意味着它可以解决一些常见的布局难题，例如浮动元素引起的高度塌陷或外边距重叠问题。
正文
什么是BFC
区块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
这个是BFC的定义，是不是感觉晦涩难懂。可以简单的说，BFC就像是一个斗宗强者（元素）开辟的一方小世界，其中的所有元素都按照一定规则进行布局，不受外部元素的影响。它决定了元素的位置、大小和相互关系，同时也影响了浮动元素与其他元素的交互方式。
BFC的布局规则
- 内部元素在垂直方向上一个接一个地放置，形成了整齐的布局。
- BFC容器内外相互隔离，使得它们不会互相影响，有效地解决了margin重叠问题。
- 在BFC内部，相邻元素的垂直方向margin可能会发生重叠，这是需要注意的现象。
- 在计算高度时，BFC容器会考虑浮动元素，这一点尤其对于清除浮动至关重要。
触发BFC的条件
| 属性 | 属性值 |
|---|---|
| overflow | hidden || auto || scroll || overlay |
| float | left || right |
| poistion | absolute || fixed |
| display | inline-block || inline-flex || inline-grid || inline-table |
| display | table-cell || table-xxx等 |
| display | flex || inline-flex |
BFC的应用场景
解决垂直外边距重叠问题
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box {
width: 20px;
height: 20px;
}
.box1 {
background-color: blue;
margin: 20px;
}
.box2 {
background-color: pink;
margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="box box1"></div>
</div>
<div class="container">
<div class="box box2"></div>
</div>
</body>
</html>
我们通过设置box1的下外边距为20px和box2的上下边距为20px，那box1和box2的距离应该为40px，但是实际上却还是20px。
解决：借助 overflow:hidden; 来引发 container的 BFC 状态，以此使得 box1和 box2处于不同的 BFC 环境中。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box {
width: 20px;
height: 20px;
}
.box1 {
background-color: blue;
margin: 20px;
}
.box2 {
background-color: pink;
margin: 20px;
}
.container {
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<div class="box box1"></div>
</div>
<div class="container">
<div class="box box2"></div>
</div>
</body>
</html>
清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap {
border: 1px solid black;
}
.box {
height: 20px;
width: 20px;
background-color: pink;
float: left;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box"></div>
</div>
</body>
</html>
我们想得到子元素被黑色边框包裹，但是结果是这样
因为子元素添加了浮动使其脱离了文档流，使父元素的高度塌陷。
解决：借助 overflow:hidden; 来引发 wrap的 BFC 状态，包裹住子元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap {
border: 1px solid black;
overflow: hidden;
}
.box {
height: 20px;
width: 20px;
background-color: pink;
float: left;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box"></div>
</div>
</body>
</html>
阻止元素被浮动元素覆盖
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box1 {
background-color: blue;
width: 100px;
height: 100px;
float: left;
}
.box2 {
background-color: pink;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
box1设置了float: left;会脱离文档流，并且覆盖在box2上面。
解决：借助 overflow:hidden; 来触发 box2 的 BFC 状态，从而使其与 box1 相互隔离，彼此不受影响。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box1 {
background-color: blue;
width: 100px;
height: 100px;
float: left;
}
.box2 {
background-color: pink;
width: 200px;
height: 200px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
小结
面试中，理解和掌握 BFC（块格式化上下文）很重要。BFC 定义了独立的渲染区域，解决布局问题，如浮动元素引起的高度塌陷、外边距重叠等。触发 BFC 的条件有多种，如 overflow、float、position 等属性值。