一、什么是flow-root?
在CSS中，我们经常会遇到父元素高度无法被子元素撑起的情况。比如，我们想让父元素的背景色或边框覆盖在子元素上，但是父元素的高度由其子元素的高度决定，子元素内容变化时，父元素的高度无法自适应。在这种情况下，我们可以使用BFC（Block Formatting Context）来解决这个问题。而Flow-root是一种常用的创建BFC的方法。
Flow-root是容器元素的新属性。它为容器元素创建了一个新的BFC，可以隔离其子元素对外面的元素的影响。它最常用于解决margin垂直方向重叠(Margin collapsing)的问题，以及清除浮动造成的布局破碎等问题。在不需要使用clearfix类似的解决方案的情况下，可以使用Flow-root作为更简单的解决方案。
.box {
display: flow-root;
}
二、Flow-root的特点
1、创建BFC
Flow-root可以为容器元素创建BFC，使得该元素成为一个独立的自包含块级格式化上下文。
举个例子，当我们需要在父元素上设置 overflow: hidden 以防止子元素浮动溢出时，可以使用 flow-root 代替 overflow: hidden。
.box {
display: flow-root;
/* overflow: hidden; */
}
2、隔离外部元素
Flow-root可以将一个容器元素的内容和子元素隔离开来，防止它们溢出父元素。
例如，一个包含浮动子元素的容器，在设置了 overflow: hidden 或者其他 BFC 规则之后，将会生成一个新的块级格式化上下文并阻止父元素大小的塌陷。
3、margin垂直方向重叠问题解决
Flow-root可以解决margin垂直方向重叠(Margin collapsing)问题。
Margin垂直方向重叠是指两个相邻元素的Margin垂直距离会缩小到一个较大的值。Flow-root会使包含盒子成为BFC，形成边界，从而防止外部Margin进入到包含块内部。
三、Flow-root的应用场景
1、解决float浮动造成的高度塌陷
在 float 浮动元素后面加上 clear 属性也可以解决高度塌陷问题，但是 clear 属性不如 Flow-root 方便和灵活，特别是在使用 :after 伪元素去清除浮动时缺点较为明显。
.box:after {
content: "";
display: table;
clear: both;
}
.box {
display: flow-root;
}
2、处理margin垂直方向重合问题
理论上，如果我们想要避免两个相邻元素的Margin重叠，可以使用 BFC 或 IFC 来解决。但是在实际应用中，在不清除浮动的情况下，要使用BFC或IFC来处理 margin 重合问题就需要花费额外的代码和功夫。使用flow-root这个CSS属性，解决margin垂直方向重叠问题将是易如反掌的事情。
.box {
display: flow-root;
}
3、将子元素完全包裹
如果容器元素中的子元素使用了 float 或者绝对定位，容器元素的高度将无法自适应。在这种情况下我们可以使用flow-root来解决这个问题。
.box {
display: flow-root;
}
.box-child {
position: absolute;
left: 0;
top: 0;
}
四、Flow-root的浏览器兼容性
目前，Flow-root在大部分现代浏览器中的兼容性良好。IE 11 和 Edge 11 浏览器需要使用-ms-flow-into替代display: flow-root，不支持flow-root。
五、总结
Flow-root是一种比较新的属性，它可以轻松解决布局中经常出现的问题。它的使用场景主要包括解决float造成高度塌陷问题，处理margin垂直重叠问题，完全包裹子元素等。虽然IE 11和Edge 11不支持flow-root，但作为一种优化布局的CSS属性，Flow-root应该会在未来的布局中扮演着更加重要的角色。