clearfix_clearfix hack的结尾？

clearfix

A new value of the display property has landed in Chrome Canary and Firefox Nightlies. In the Editor’s Draft of the CSS Display Module Level 3, display: flow-root is defined as:

显示属性的新值已经出现在Chrome Canary和Firefox Nightlies中。 在CSS Display Module Level 3的编辑草稿中 ，显示：flow-root定义为：

“The element generates a block container box, and lays out its contents using flow layout. It always establishes a new block formatting context for its contents.”

“元素生成一个块容器框，并使用流布局对内容进行布局。 它总是为其内容建立新的块格式化上下文。”

The key use of this comes when you have a box with a floated element inside it, and the floated element is taller than the other content inside the box. Default behaviour is that the box will not clear the float, and anything that comes afterwards will also wrap the floated item.

当您有一个带有浮动元素的盒子并且浮动元素比盒子中其他内容高时，它的关键用途就来了。 默认行为是该框不会清除浮动内容，之后出现的所有内容也会包装浮动内容。

The floated element is out of flow causing the box to collapse.

浮动的元素没有流量，导致盒子崩溃。

The typical way we have solved this issue is to use a clearfix hack. The hack inserts some generated content, sets it to display; table or display: block and then clears it. This then ensures that the box becomes self-clearing, in our example the border will display after the floated item, and any following content will not rise up to wrap the float.

解决此问题的典型方法是使用clearfix hack 。 hack插入一些生成的内容，并将其设置为显示； table或display：阻止然后清除它。 然后，这将确保该框变得自清除，在我们的示例中，边框将在浮动项目之后显示，并且随后的任何内容都不会上升以包装浮动内容。

输入显示：flow-root (Enter display: flow-root)

Using display: flow-root on an element will perform this clearing for us. Instead of needing to apply the clearfix hack we can use the CSS display property on the container with a value of flow-root.

在元素上使用display：flow-root将为我们执行此清除操作。 无需应用clearfix hack，我们可以在容器上使用带有flow-root值CSS display属性。

.container {
  display: flow-root;
}.container {
  display: flow-root;
} 

The border then clears the float and following content displays after our contained floated element.

然后边框清除浮点数，并在包含的浮点元素之后显示以下内容。

After setting display: flow-root on the container

设置显示后：容器上的流根

You can see a set of demos on CodePen. You will need to use Chrome Canary or Firefox Nightly to see this working today!

您可以在CodePen上看到一组演示 。 您需要使用Chrome Canary或Firefox Nightly才能立即正常运行！

See the Pen display: flow-root by rachelandrew (@rachelandrew) on CodePen.

见钢笔显示：流动根由rachelandrew（ @rachelandrew上） CodePen 。

There is some discussion about the name of the value on an issue posted to the CSS Working Group GitHub. If you want to see interoperable support for this feature soon, then I’d suggest you pop over to the Edge UserVoice site and give it a vote.

关于发布到CSS工作组GitHub上的问题的值的名称，存在一些讨论。 如果您希望很快看到对此功能的可互操作支持，那么建议您跳至Edge UserVoice网站并对其进行投票 。

翻译自: https://rachelandrew.co.uk/archives/2017/01/24/the-end-of-the-clearfix-hack/

clearfix