BFC详解

什么是BFC?怎么触发BFC?BFC有什么作用?可以解决哪些问题?

1.什么是BFC

先看下官方的解释:

区块格式化上下文(Block Formatting Context,BFC)是 Web 页面的可视 CSS 渲染的一部分,是块级盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。

官方的描述有点抽象,其实可以把BFC 理解成就是css的块级作用域。

具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。

2.怎么触发BFC

下列方式会创建块格式化上下文:

  • 文档的根元素(<html>)。
  • 浮动元素(即 float 值不为 none 的元素)。
  • 绝对定位元素(position 值为 absolutefixed 的元素)。
  • 行内块元素(display 值为 inline-block 的元素)。
  • overflow 为hidden,scroll,auto的元素,值不为 visibleclip 的块级元素。
  • display 值为 flow-root 的元素。
  • 弹性元素(display 值为 flexinline-flex 元素的直接子元素),如果它们本身既不是弹性网格也不是表格容器。
  • 网格元素(display 值为 gridinline-grid 元素的直接子元素),如果它们本身既不是弹性网格也不是表格容器。
  • 表格单元格(display 值为 table-cell,HTML 表格单元格默认值)。
  • 表格标题(display 值为 table-caption,HTML 表格标题默认值)。
  • 匿名表格单元格元素(display 值为 table(HTML 表格默认值)、table-row(表格行默认值)、table-row-group(表格体默认值)、table-header-group(表格头部默认值)、table-footer-group(表格尾部默认值)或 inline-table)。
  • contain 值为 layoutcontentpaint 的元素。
  • 多列容器(column-countcolumn-width (en-US) 值不为 auto,且含有 column-count: 1 的元素)。
  • column-span 值为 all 的元素始终会创建一个新的格式化上下文,即使该元素没有包裹在一个多列容器中(规范变更Chrome bug

display: flow-root是 CSS 中的一个属性,它可以让元素块状化,同时包含格式化上下文BFC。当应用 display: flow-root 声明后,无论是内联元素还是原本就是块级元素,都会变成块级元素,并建立新的块级格式上下文(BFC)

希望这个回答对你有所帮助!

3.BFC可以解决哪些问题

参考链接:

区块格式化上下文 - Web 开发者指南 | MDN (mozilla.org)

掌握外边距折叠 - CSS:层叠样式表 | MDN (mozilla.org)

10 分钟理解 BFC 原理 - 知乎 (zhihu.com)

什么是BFC?面试前看这一篇就够了 - 知乎 (zhihu.com)

快速了解CSS display:flow-root声明 << 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com)

深入理解 CSS 中的外边距折叠及 BFC - 掘金 (juejin.cn)

相关推荐
到底起什么网名才能不重名1 小时前
使用各种CSS美化网页
前端·css·vscode·bootstrap·html
sunbyte2 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
码哥DFS6 小时前
Flex布局原理
前端·css·css3
长路 ㅤ   7 小时前
前端技术博客汇总文档
javascript·vue.js·css3·html5·前端技术
小飞悟9 小时前
别再只会用 px 了!移动端适配必须掌握的 CSS 单位
前端·css·设计
晴殇i11 小时前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css
Liudef061 天前
2048小游戏实现
javascript·css·css3
小桥风满袖1 天前
Three.js-硬要自学系列38之专项学习缓冲几何体
前端·css·three.js
Hilaku1 天前
深入CSS层叠的本质:@layer如何优雅地解决样式覆盖与!important滥用问题
前端·css·html
每天开心1 天前
深入理解 CSS 选择器:从基础到高级
css·html·ai编程