我的笔记-BFC的知识点梳理

什么是BFC？

BFC（Block Formatting Contexts）块级格式化上下文，它是页面 CSS 视觉渲染的一部分， 用于决定块级盒的布局及浮动相互影响范围的一个区域 。

BFC的创建

• 根元素（ ）
• 浮动元素（ 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/...）

这是我在思否上写的第一篇笔记，以后会持续写的，当然后面也会加上我学习中的所思所想。结尾引入一句很喜欢的话：保持独立思考，不卑不亢，长成自己要的样子。