一文掌握CSS 属性display:flow-root声明

Carnelian ·

更新时间:2024-11-13

· 996 次阅读

byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9404

本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

一、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;
}

实时效果如下：