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)

相关推荐
Hilaku14 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
拜无忧17 小时前
html,svg,花海扩散效果
前端·css·svg
华仔啊21 小时前
Vue3+CSS 实现的 3D 卡片动画,让你的网页瞬间高大上
前端·css
在云端易逍遥1 天前
前端必学的 CSS Grid 布局体系
前端·css
进阶的鱼1 天前
(4种场景)单行、多行文本超出省略号隐藏
前端·css·面试
石金龙2 天前
[译] Composition in CSS
前端·css
天天扭码2 天前
来全面地review一下Flex布局(面试可用)
前端·css·面试
用户458203153172 天前
CSS特异性:如何精准控制样式而不失控?
前端·css
会豪2 天前
CSS 动画属性精讲:从基础到实战
前端·css
前端Hardy3 天前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css