区块格式化上下文(BFC)

56 阅读1分钟
区块格式化上下文到底是什么?

MDN上面这么解释:区块格式化上下文(Block Formatting Context,BFC)是 Web 页面的可视 CSS 渲染的一部分,是块级盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。依我理解其实就是页面上的一块隔离独立的渲染区域,跟相邻元素的布局不互相影响。

哪些方式会创建块格式化上下文?
  • 文档的根元素(<html>)。
  • 浮动元素。
  • 绝对或固定定位的元素。
  • 行内块元素:display:inline-block。
  • display值为flow-root,flex, grid等等
  • 设置了overflow不为visible
在布局中格式化上下文能解决什么问题?
  • 包含内部浮动
  • 排除外部浮动
  • 解决外边距折叠问题