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)

相关推荐
again4322 小时前
css生效规则
css
Esun_R2 小时前
使用CSS选择器选择列表中最后一个子元素的几种情况
css
海底火旺3 小时前
以一个简单的React应用理解数据绑定的重要性
前端·css·react.js
Allen Bright5 小时前
【CSS-15】深入理解CSS transition-duration:掌握过渡动画的时长控制
前端·css
到底起什么网名才能不重名1 天前
使用各种CSS美化网页
前端·css·vscode·bootstrap·html
sunbyte1 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
码哥DFS1 天前
Flex布局原理
前端·css·css3
长路 ㅤ   1 天前
前端技术博客汇总文档
javascript·vue.js·css3·html5·前端技术
小飞悟1 天前
别再只会用 px 了!移动端适配必须掌握的 CSS 单位
前端·css·设计
晴殇i1 天前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css