display 的新属性值 flow-root

首先，先了解的是BFC

BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒都会垂直的沿着其父元素的边框排列。

在CSS的布局中，早期采用布局多半是依赖于float属性，但元素浮动之后会造成容器的高度坍塌。为了避免这个现象，有了各式各样的清除浮动的黑魔法。

flow-root是最新一种创建BFC的属性。

正因为如此，大多数人都认为flow-root就是一个简单的clearfix黑魔法，也有很多人说他是最新清除浮动的最简易方案。

支持flow-root属性值

虽然主流浏览器Firefox 53+、Chrome 58+和Opera 45+都支持flow-root属性。但实际当中，我们必竟有很多业务需求是需要兼容一些低版本的。

为了更好对flow-root做降级处理，可以通过CSS的条件属性@supports()来做相应的处理。

这里是实例demo