使用 display: flow-root 和 overflow: hidden 包含浮动有什么区别？答案

【问题标题】：What is the difference between using display: flow-root and overflow: hidden to contain floats?使用 display: flow-root 和 overflow: hidden 包含浮动有什么区别？
【发布时间】：2017-09-19 10:07:24
【问题描述】：

css 规范中添加了新的 display 值 flow-root：

该元素生成一个块容器框，并使用流式布局对其内容进行布局。它总是为其内容建立一个新的块格式化上下文。 [CSS2] – https://drafts.csswg.org/css-display/#valdef-display-flow-root

有many ways to create a block context，例如overflow: hidden.

使用display: flow-root 与overflow: hidden 包含浮动元素有什么不同？

【问题讨论】：

标签： css css display

【解决方案1】：

display: flow-root 允许您的流根元素具有 overflow: visible（如果这对您很重要），因为带有 overflow: visible 的块框通常不会建立块格式上下文。

【讨论】：

我主要不清楚何时会寻求浮动元素而不想要剪辑溢出的内容。在讨论过 IRC 之后，一个可能的用例是为浮动元素启用工具提示。