如何理解 CSS 布局和块级格式上下文

使用 display: inline-block 、 display: table-cell 或者 display: table-caption ，其中 table-cell 和 table-caption 是表格相关 HTML 元素的对应默认 CSS 值，所以当你创建表格每个表格单元都会自动创建 BFC。

另外当使用 multi-column layout （多列布局）时使用 colum-span: all 也可以创建 BFC。Flex（弹性） 和 Grid（网格） 布局中的元素也会自动创建类似 BFC 的机制，只是它们被称为 Flex Formatting Context（弹性格式上下文）和 Grid Formatting Context(网格格式上下文)。这反映了它们所参与的布局类型。一个 Block Formatting Context（块级格式上下文）表明他内部的元素参与了块级布局，一个 弹性格式上下文意味着它内部的元素参与了弹性布局。在实践中，这几种布局的结果是相似的，浮动元素会被包裹、外边距不会叠加。

创建 BFC 的新方式

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!