共计 2454 个字符，预计需要花费 7 分钟才能阅读完成。
前言
大家好，我是 HoMeTown，明天想聊一聊 CSS 中的BFC，很多敌人应该都听过这个名词，搞懂BFC 能够让咱们了解 CSS 中一些很诡异的中央，话不多说，直奔主题！
什么是 BFC
BFC是什么？援用 MDN 的一段介绍：
块格式化上下文（Block Formatting Context，BFC） 是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程产生的区域，也是浮动元素与其余元素交互的区域。
大白话讲，我了解 BFC 其实就是 CSS 中的块级作用域，蕴含上下文元素中的所有子元素，但不包含内创立了新的 BFC 的子元素的外部元素，也就是 A -> B -> C 然而 A !-> C，换句话讲，一个元素不可能存在于两个 BFC 中，因为如果一个元素存在于两个不同的 BFC，那么这个元素就能和这两个 BFC 中的子元素产生作用，那就守法了 BFC 的初衷：隔离。
BFC 的渲染规定
BFC中有特定的渲染规定，如下：
- 同一个 BFC 中两个相邻的元素的
margin 重叠问题 - BFC 在计算高度是，即便浮动的元素也会参加高度计算
- BFC 的区域不会与 float 的元素区域重叠
- 每个元素的左外边距与蕴含块的左边界相接触，即便浮动也如此
- 外部的盒子会一在垂直方向上一个个搁置
BFC 的触发条件
- 根元素（HTML 标签）
- float
- overflow != visible
- display =
inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid - postion =
fixed/absolute
BFC 的作用
避免相邻元素的 margin 重叠
下面提到过，同一个 BFC 的两个相邻元素的高低 margin 会产生重叠，举个🌰：
<style>
p {
width: 300px;
height: 200px;
margin: 100px;
line-height: 200px;
text-align: center;
background-color: #f3eaff;
color: #8857cd;
font-weight: bold;
}
</style>
</head>
<body>
<p>HoMeTown</p>
<p> 你好敌人 </p>
</body>页面显示如下：
同一个 BFC 中的两个相邻元素的 margin 高低重叠，此时咱们须要手动创立新的 BFC，解决这个问题，改变如下：
<style>
p {
width: 300px;
height: 200px;
margin: 100px;
line-height: 200px;
text-align: center;
background-color: #f3eaff;
color: #8857cd;
font-weight: bold;
}
.wrapper {overflow: hidden;}
</style>
</head>
<body>
<p>HoMeTown</p>
<div class="wrapper">
<p> 你好敌人 </p>
</div>
</body>页面展现如下：
margin 恢复正常
BFC 在计算高度是，即便浮动的元素也会参加高度计算
家喻户晓，元素 float 脱离文档流之后，会产生高度塌陷的问题，除了革除浮动，咱们还能够通过 BFC 的个性去解决，举个🌰：
<style>
p {
width: 300px;
height: 200px;
line-height: 200px;
text-align: center;
background-color: #f3eaff;
color: #8857cd;
font-weight: bold;
float: left;
}
.wrapper {
width: 600px;
border: 4px solid #cfc;
}
</style>
</head>
<body>
<div class="wrapper">
<p>HoMeTown</p>
<p> 你好敌人 </p>
</div>
</body>页面展现如下：
因为子元素浮动的起因导致盒子 .wrapper 高度塌陷，此时咱们手动创立 BFC 区域，再看看成果，改变如下：
.wrapper {
width: 600px;
border: 4px solid #cfc;
overflow: hidden;
}此时，页面展现如下：
.wrapper的高度恢复正常！
每个元素的左外边距与蕴含块的左边界相接触
咱们晓得，如果盒子关上了 float，脱离文档流且不占位，依照 BFC 的特点，块内每个元素的右边距都会与蕴含块的右边距重合，举个🌰
<style>
body {position: relative;}
.main {
width: 300px;
height: 200px;
line-height: 200px;
text-align: center;
background-color: #f3eaff;
color: #8857cd;
font-weight: bold;
border: 2px solid red;
}
.side {
width: 100px;
height: 200px;
line-height: 200px;
text-align: center;
background-color: #f3eaff;
color: #8857cd;
font-weight: bold;
border: 2px solid yellow;
float: left;
}
</style>
</head>
<body>
<div class="side"> 你好敌人 </div>
<div class="main">HoMeTown</div>
</body>页面展现如下：
.side开启浮动，左外边距与 body 的右边重合，.main也是，这并不是咱们想看到的，那么，能够利用 BFC 的特点，BFC 蕴含上下文元素中的所有子元素，但不包含内创立了新的 BFC 的子元素的外部元素 ，手动给.main 创立BFC，改变如下：
.main {
...
overflow: hidden;
}此时页面展现如下：
胜利！
总结
BFC外部的渲染规定，在古代 flex 布局中其实有更多的解决方案，然而作为一个职业前端，还是须要理解一下。以上就是我的见解，不喜勿喷。
