display还有这样的属性？

今天看了一篇关于display的文章，在这和大家分享一下。CSS中的一个新属性flow-root。这个属性是CSS Display Module Level3中的一个属性。简单讲这个属性是display中的一个新属性，对于display属性，大家熟悉的可能是常见的几个属性，比如block、inline、inline-block、flex、grid、table和table-cell等。

• 那flow-root既然是display的新属性值，那这个属性值有什么特性呢？
• flow-root是最新一种创建BFC的属性。(Firefox53和Chrome58两大主流浏览器目前都支持)

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

通俗来讲，就是另一种清除浮动、解决塌陷的方法，我们之前用一下几种：

1、给父级overflow：hidden；
2、给父级高度：heigth；
3、加一个div空标签，clear：both；
4、clearfix：after{ content:""; display:block; clear:both; }
给父级一个diaplay：flow-root也可以达到以上效果。

虽然主流浏览器Firefox 53+、Chrome 58+和Opera 45+都支持flow-root属性(有关于浏览器对该属性的兼容性，可以通过Caniuse.com来查询)。但实际当中，我们必竟有很多业务需求是需要兼容一些低版本的。对于一位CSS的极度爱好者，总是喜欢在项目中不断的尝试使用一些新特性。为了更好对flow-root做降级处理，我们可以通过CSS的条件属性@supports()来做相应的处理。

如有不到之处，请大家多多指正。