什么是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/...）
这是我在思否上写的第一篇笔记，以后会持续写的，当然后面也会加上我学习中的所思所想。结尾引入一句很喜欢的话：保持独立思考，不卑不亢，长成自己要的样子。
本文含有隐藏内容，请 开通VIP 后查看