共计 991 个字符，预计需要花费 3 分钟才能阅读完成。
什么是 BFC？
BFC（Block Formatting Contexts）块级格式化上下文，它是页面 CSS 视觉渲染的一部分，用于决定块级盒的布局及浮动相互影响范畴的一个区域。
BFC 的创立
- 根元素（
<html>） - 浮动元素（
float不为none） - 相对定位元素（
position为absolute或fixed） - 表格的题目和单元格（
display为table-caption，table-cell） - 匿名表格单元格元素（
display为table或inline-table） - 行内块元素（
display为inline-block） overflow的值不为visible的元素- 弹性元素（
display为flex或inline-flex的元素的间接子元素） - 网格元素（
display为grid或inline-grid的元素的间接子元素）
BFC 的范畴
BFC 蕴含创立它的元素的所有子元素，然而不包含创立了新的 BFC 的子元素的外部元素。
简略来说，子元素如果又创立了一个新的 BFC，那么它外面的内容就不属于上一个 BFC 了，这体现了 BFC 隔离 的思维。也就是所说， 一个元素不能同时存在于两个 BFC 中。
BFC 的个性
BFC外部的块级盒会在垂直方向上一个接一个排列 ①- 同一个
BFC下的相邻块级元素可能产生外边距折叠，创立新的BFC能够防止的外边距折叠 ② - 每个元素的外边距盒（margin box）的右边与蕴含块边框盒（border box）的右边相接触（从右向左的格式化，则相同），即便存在浮动也是如此 ③
- 浮动盒的区域不会和
BFC重叠 ④ - 计算
BFC的高度时，浮动元素也会参加计算 ⑤
BFC 的利用
自适应多栏布局
利用 个性③ 和 个性④，两头栏创立 BFC，左右栏宽度固定后浮动。因为盒子的 margin box 的右边和蕴含块 border box 的右边相接触，同时浮动盒的区域不会和 BFC 重叠，所以两头栏的宽度会自适应，示例。
避免外边距折叠
利用 个性②，创立新的 BFC，让相邻的块级盒位于不同 BFC 下能够避免外边距折叠，示例。
革除浮动
利用 个性⑤，BFC 外部的浮动元素也会参加高度计算，能够革除 BFC 外部的浮动，示例。
笔记最初
参考文章：url（https://www.colabug.com/2020/…）
这是我在思否上写的第一篇笔记，当前会继续写的，当然前面也会加上我学习中的所思所想。结尾引入一句很喜爱的话：放弃独立思考，不卑不亢，长成本人要的样子。
正文完