开发学习网CSS 区块格式化上下文
原创区块格式化上下文
区块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
下列方式会创建块格式化上下文：
- 文档的根元素（
<html>）。 - 浮动元素（即
float值不为none的元素）。 - 绝对定位元素（
position值为absolute或fixed的元素）。 - 行内块元素（
display值为inline-block的元素）。 - 表格单元格（
display值为table-cell，HTML 表格单元格默认值）。 - 表格标题（
display值为table-caption，HTML 表格标题默认值）。 - 匿名表格单元格元素（
display值为table（HTML 表格默认值）、table-row（表格行默认值）、table-row-group（表格体默认值）、table-header-group（表格头部默认值）、table-footer-group（表格尾部默认值）或inline-table）。 overflow值不为visible或clip的块级元素。display值为flow-root的元素。contain值为layout、content或paint的元素。- 弹性元素（
display值为flex或inline-flex元素的直接子元素），如果它们本身既不是弹性、网格也不是表格容器。 - 网格元素（
display值为grid或inline-grid元素的直接子元素），如果它们本身既不是弹性、网格也不是表格容器。 - 多列容器（
column-count或column-width值不为auto，且含有column-count: 1的元素）。 column-span值为all的元素始终会创建一个新的格式化上下文，即使该元素没有包裹在一个多列容器中。
格式化上下文影响布局，通常，我们会为定位和清除浮动创建新的 BFC，而不是更改布局，因为它将：
- 包含内部浮动。
- 排除外部浮动。
- 阻止外边距重叠。
备注：
弹性/网格容器（display：flex/grid/inline-flex/inline-grid）建立新的弹性/网格格式化上下文，除布局之外，它与区块格式化上下文类似。弹性/网格容器中没有可用的浮动子级，但排除外部浮动和阻止外边距重叠仍然有效。
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权本站发表，未经许可，不得转载。
上一篇：CSS
格式化上下文简介 下一篇：CSS
行内格式化上下文
相关文章
作者文章
- CSS 使用CSS数学函数 4个月前 (08-23)
- CSS Textual data types 4个月前 (08-23)
- CSS 数字数据类型 4个月前 (08-23)
- CSS CSS 属性值定义语法 4个月前 (08-23)
- CSS 使用 CSS 过渡 4个月前 (08-23)