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

葵进必达达

什么是BFC?

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

BFC的创建

  • 根元素( <html>
  • 浮动元素( float 不为 none
  • 绝对定位元素( positionabsolutefixed
  • 表格的标题和单元格( displaytable-captiontable-cell
  • 匿名表格单元格元素( displaytableinline-table
  • 行内块元素( displayinline-block
  • overflow 的值不为 visible 的元素
  • 弹性元素( displayflexinline-flex 的元素的直接子元素)
  • 网格元素( displaygridinline-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/...

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

阅读 763
1 声望
1 粉丝
0 条评论
1 声望
1 粉丝
文章目录
宣传栏