扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
小编给大家分享一下CSS属性display:flow-root声明怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
一、Safari浏览器支持了
display:flow-root 刚出来的时候，我一看兼容性，啧啧，不知道猴年马月才能用在生产环境，今天又遇到这厮，一查兼容性，嘿，小子，不错嘛，Safari浏览器从版本13开始支持了，距离流行使用指日可待。
二、display:flow-root干嘛用的？
元素，无论是内联元素，还是原本就是块级元素，在应用display:flow-root 声明后，都会变成块级元素，同时这个元素会建立新的块级格式上下文，也就是业界常说的BFC。
关于BFC，可以参考我之前的这篇经典文章：“ CSS深入理解流体特性和BFC特性下多栏自适应布局 ”。
BFC除了可以用来布局之外，还有清除浮动，以及去除margin合并现象的作用，因此，display:flow-root 也有类似的作用，相比float浮动，position绝对定位，或者overflow隐藏，inline-block等特性产生的块级格式上下文，display:flow-root 不会给元素带来额外的副作用，例如overflow:hidden 虽然可以去除浮动的干扰，但是，有可能会让子元素无法定位在容器外部。
使用display:flow-root 就不会有这样的担忧。
例如下面这个例子，容器有轮廓，子元素浮动：
p { outline: solid deepskyblue; } img { float: left; }
结果轮廓都合在一起了，如下图所示：
此时，只要给 元素设置display:flow-root ，浮动导致元素高度塌陷的问题就不存在了：
p {
display: flow-root;
}效果如下截图所示：
类似的，margin属性合并的现象也可以使用display:flow-root 阻止。
HTML代码如下：