前言
大家好，我是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布局中其实有更多的解决方案，但是作为一个职业前端，还是需要了解一下。以上就是我的见解，不喜勿喷。
