前言
BFC在css的学习中是重要的但不易理解的概念，BFC也牵扯了很多其他问题，如浮动、定位、盒模型等，因此弄懂BFC是很有必要的，本文是我对于BFC进行的一些总结，希望对你有所帮助。
先来看看，BFC是什么吧！
根据MDN文档的定义：
块级格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
更直白地说，BFC创建了一个全新的、独立的渲染环境，在这个环境中，内部元素的布局完全不受外部环境的影响，同时也不会影响到外部元素的布局。
BFC的触发条件有哪些？
了解如何触发BFC有助于我们更好地控制页面布局和解决一些常见的样式问题。以下是几种常见的触发BFC的方法：
- 根元素
<html>(最顶级的BFC) - 浮动元素 (
float不为none) - 绝对定位或固定定位的元素 (
position: absolute或fixed) - 行内块元素 (
display: inline-block) - 设置
overflow为非visible的值，例如hidden,auto等。 - 弹性盒子 (
flex item) 和网格布局项 (grid item)
此外，还有其他一些情况可以触发BFC，详细可以看看区块格式化上下文 - CSS：层叠样式表 | MDN 上的相关内容。
BFC的规则
BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列- 每个元素margin 左边，与包含块(父盒子)border的左边相接触，即使存在浮动也一样
- BFC是一个独立的渲染区域：在这个区域内，所有元素遵循自己的布局规则，不会受到外界元素的影响。
- 相邻垂直边距会重叠：在同一个BFC内的相邻元素之间，如果它们有垂直方向上的外边距（margin），那么较大的外边距将生效，较小的那个会被忽略。
- BFC不会与浮动元素重叠：这意味着一个BFC区域会自动调整它的边界，以避免与任何浮动元素发生重叠。
- 浮动元素参与BFC高度计算：当一个元素形成一个新的BFC时，即使它包含了浮动的子元素，这些浮动元素也会被计入该容器的高度计算之中。
BFC规则的应用场景
1.清除浮动脱离文档流，带来的影响
<!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>
.container {
border: 2px solid black;
padding: 10px;
}
.float-box {
float: left;
width: 150px;
height: 100px;
background-color: lightblue;
margin: 10px;
}
.bfc-box {
width: 300px;
height: auto;
background-color: lightgreen;
/* overflow: auto; */
/*创建 BFC 切换*/
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<div class="float-box">这是一个左浮动的盒子</div>
<div class="bfc-box">
<p>这是创建了 BFC 的盒子内部的内容。</p>
<p>注意，这个内容不会被外部的浮动元素影响。</p>
</div>
</div>
</body>
</html>
效果：
浮动元素可能会脱离正常的文档流，导致后续元素环绕显示的问题，在本案例中.bfc-box 内部的内容会因为外部 .float-box 的存在而受到影响，无法正常排列。为了解决这个问题，我们可以通过给 .bfc-box 添加 overflow: auto; 来触发BFC，从而确保其内部内容不被外部浮动元素干扰。
当一个元素被赋予 overflow: auto; 属性时，它实际上创建了一个新的BFC。这样一来，即便内部包含浮动元素，这些浮动元素也只会在这个新创建的BFC范围内活动，而不会影响到外面的其他元素，通过BFC可以非常高效的清除浮动带来的布局混乱结果。
修改后的效果：
2.清除浮动引起的父级容器高度塌陷
<!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>
/* 而用 BFC 清除浮动的原理就是：计算 BFC 的高度时，浮动元素也参与计算。只要触发父元素的 BFC 即可。 */
.parent {
background-color: red;
/* overflow: hidden; */
}
.child {
float: left;
height: 200px;
width: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
效果：
当子元素使用了浮动属性后，其父级容器可能不会自动扩展以包含这些浮动元素，造成所谓的“高度塌陷”现象，此时，同样可以通过创建BFC来修复这一问题。
所以我们将 .parent 的 overflow 属性设为 hidden 后，这样就能保证父级容器正确地包裹住所有的子元素，包括那些浮动的元素。当一个元素形成新的BFC时，它会重新计算自身的尺寸，包括考虑内部浮动元素所占用的空间，因此，即使子元素漂浮在外，只要父级元素形成了BFC，它就能正确反映子元素的实际大小，避免了高度塌陷的情况。
修改后的效果：
3.避免外边距折叠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BFC</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
background-color: lightblue;
border: 1px solid black;
}
.box1 {
margin-bottom: 50px;
}
.box2 {
margin-top: 30px;
}
</style>
</head>
<body>
<div class="box box1">Box1</div>
<!-- /* 新的格式化上下文 */ -->
<!-- <div style="overflow: hidden;"></div> -->
<div class="box box2">Box2</div>
</body>
</html>
效果：
默认情况下，两个相邻的块级元素之间的垂直外边距会发生折叠，即只取两者中较大的那个值。
为了防止这种行为，我们可以在两个盒子之间插入一个空的、具有 overflow: hidden; 样式的div，这样我们就创建了一个新的BFC，而当我们在两个相邻的块级元素之间创建一个BFC时，这两个元素就分别属于不同的BFC，它们的外边距就不会再发生折叠。这是因为不同BFC之间的元素被视为独立的存在，不会互相影响对方的布局属性。
修改后的效果：
我们这次的分享就先到这里啦。当然，可能有些地方说得不太全或者不够准确。如果大家发现有啥不对劲儿的地方，或者有特别的想法和经验，欢迎在评论区畅所欲言哦！我们可以一起交流心得，互相学习，让讨论变得更加丰富多彩。
总结
BFC不仅是CSS布局机制的核心组成部分之一，而且在实际开发中也有着广泛的应用，通过对BFC的理解和运用，我们可以更加灵活地控制页面布局，解决诸如清除浮动、防止外边距折叠等问题。同时这也是面试环节的技术问答中经常遇到的问题，希望对你有所帮助！🥳🥳
