小编给大家分享一下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><img src="mm.jpg"></p>
p {
outline: solid deepskyblue;
}
img {
float: left;
}结果轮廓都合在一起了，如下图所示：
此时，只要给 <p> 元素设置 display:flow-root ，浮动导致元素高度塌陷的问题就不存在了：
p {
display: flow-root;
}效果如下截图所示：
类似的，margin属性合并的现象也可以使用 display:flow-root 阻止。
HTML代码如下：
<div class="box"> <p>margin: 2em;</p> </div> <div class="box flow-root"> <p>margin: 2em;</p> </div>
CSS如下：
.box {
background-color: #f0f3f9;
}
.box p {
outline: solid deepskyblue;
margin: 2em;
}
.flow-root {
display: flow-root;
}结果上面的容器元素margin被穿过去了，而下面的容器元素，因为设置了 display:flow-root ，所以margin穿透被阻止了，于是，里面 <p> 元素占据的空间就显得较大，如下图所示：
以上两个例子均有demo可以体验，您可以狠狠地点击这里： display:flowt-root作用示意demo
display:flow-root 还可以和浮动属性配合，实现两栏自适应的布局效果。
例如：
<div class="box flow-root"> <img src="mm.jpg"> <p class="flow-root">拼多多暴涨7%，市值突破700亿美元，超越京东。而黄峥个人财富也处于内地第三大富豪</p> </div>
.box img {
float: left;
margin-right: 20px;
}
.box p {
background-color: #f0f3f9;
padding: 10px;
}
.flow-root {
display: flow-root;
}实时效果如下：
拼多多暴涨7%，市值突破700亿美元，超越京东。而黄峥个人财富也处于内地第三大富豪
三、结语
总结下本文要点
display:flow-root 可以让元素块状化，同时包含格式化上下文BFC，可以用来清除浮动，去除 margin 合并，实现两栏自适应布局等。
display:flow-roo t可以在部分项目中使用了。
display:flow
display 属性还支持一个目前处于试验形式的值，名为 flow ，表现为元素可能是内联框盒子，也可能是块级框盒子。
究竟渲染成哪个盒子与外部元素的显示类型相关，
要么生成内联格式化上下文，要么生成块级格式化上下文。如果元素外部显示类型为inline或run-in，并且元素参与block或inline格式上下文中，则元素表现为inline框，否则表现为block容器框。
根据是否包含格式化上下文属性（如 position 、 float 或 overflow ）以及元素本身是否参与块或内联格式上下文， display:flow 元素要么为其内容建立新的块格式上下文（BFC），要么将其内容集成到其父格式上下文中。
display:flow 目前兼容性不详，估计目前没几个浏览器支持。
以上是“CSS属性display:flow-root声明怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
