什么是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/...)
这是我在思否上写的第一篇笔记,以后会持续写的,当然后面也会加上我学习中的所思所想。结尾引入一句很喜欢的话:保持独立思考,不卑不亢,长成自己要的样子。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。