如何理解 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 的新方式

使用 overflow 或其他的方法创建 BFC 时会有两个问题。第一个是这些方法本身是有自身的设计目的的，所以在使用它们创建 BFC 时会可能产生副作用。例如使用 overflow 创建 BFC 后在某些情况下你可能会看到出现一个滚动条或者元素内容被削减。这是由于 overflow 属性是设计被用来让你告诉浏览器如何定义元素的溢出状态的。浏览器执行了它最基本的定义。

另一个问题是，即使在没有出现副作用的情况下，使用 overflow 也可能会使另一个开发人员感到困惑。他们可能会各种猜想：这里为啥要把 overflow 的值设为 auto 或 scroll？原开发人员做这个意义何在？原开发人员是想让这里出现滚动条吗？

最安全的做法应该是创建一个 BFC 时不会有任何副作用，它内部的元素都安安全全的呆在这个小布局里，这种方法不会引起任何意想不到的问题，也可以让开发者意图清晰。CSS 工作组也十分认同这种想法，所以他们定制了一个新的属性值： display: flow-root 。

你可以使用 display: flow-root 安全的创建 BFC 来解决本文中提到的各种问题，包括：包裹浮动元素、阻止外边距叠加、阻止环绕浮动元素。

caniuse 上 display: flow-root 各浏览器支持情况

浏览器对该属性值的支持目前还是有限的，如果你觉得这个属性值很方便，请投票去让 Edge 也支持它。不过无论如何，你现在应该已经理解了什么是 BFC，以及如何使用 overflow 或其他方法来包裹浮动，以及知道了 BFC 可以阻止元素去环绕浮动元素，如果你想使用弹性或网格布局可以在一些不支持他们的浏览器中使用 BFC 的这些特性做降级处理。

（编辑：焦作站长网）

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