一、Safari瀏覽器支持了
display:flow-root剛出來的時候，我一看兼容性，嘖嘖，不知道猴年馬月才能用在生產(chǎn)環(huán)境，今天又遇到這廝，一查兼容性，嘿，小子，不錯嘛，Safari瀏覽器從版本13開始支持了，距離流行使用指日可待。

display:flow-root兼容性截圖

二、display:flow-root干嘛用的？
元素，無論是內(nèi)聯(lián)元素，還是原本就是塊級元素，在應(yīng)用display:flow-root聲明后，都會變成塊級元素，同時這個元素會建立新的塊級格式上下文，也就是業(yè)界常說的BFC。

關(guān)于BFC，可以參考我之前的這篇經(jīng)典文章：“CSS深入理解流體特性和BFC特性下多欄自適應(yīng)布局”。

BFC除了可以用來布局之外，還有清除浮動，以及去除margin合并現(xiàn)象的作用，因此，display:flow-root也有類似的作用，相比float浮動，position絕對定位，或者overflow隱藏，inline-block等特性產(chǎn)生的塊級格式上下文，display:flow-root不會給元素帶來額外的副作用，例如overflow:hidden雖然可以去除浮動的干擾，但是，有可能會讓子元素無法定位在容器外部。

使用display:flow-root就不會有這樣的擔憂。

例如下面這個例子，容器有輪廓，子元素浮動：

<p><img src="mm.jpg"></p>
p {
    outline: solid deepskyblue;   
}
img {
    float: left;
}
結(jié)果輪廓都合在一起了，如下圖所示：

浮動高度塌陷示意

此時，只要給<p>元素設(shè)置display:flow-root，浮動導致元素高度塌陷的問題就不存在了：

p {
    display: flow-root;
}
效果如下截圖所示：

浮動被清除了示意

類似的，margin屬性合并的現(xiàn)象也可以使用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;
}
結(jié)果上面的容器元素margin被穿過去了，而下面的容器元素，因為設(shè)置了display:flow-root，所以margin穿透被阻止了，于是，里面<p>元素占據(jù)的空間就顯得較大，如下圖所示：

margin合并阻止示意

以上兩個例子均有demo可以體驗，您可以狠狠地點擊這里：display:flowt-root作用示意demo

display:flow-root還可以和浮動屬性配合，實現(xiàn)兩欄自適應(yīng)的布局效果。

例如：

<div class="box flow-root">
    <img src="mm.jpg">
    <p class="flow-root">拼多多暴漲7%，市值突破700億美元，超越京東。而黃崢個人財富也處于內(nèi)地第三大富豪</p>
</div>
.box img {
    float: left;
    margin-right: 20px;
}
.box p {
    background-color: #f0f3f9;
    padding: 10px;
}
.flow-root {
    display: flow-root;
}
實時效果如下：

拼多多暴漲7%，市值突破700億美元，超越京東。而黃崢個人財富也處于內(nèi)地第三大富豪

三、結(jié)語
總結(jié)下本文要點

display:flow-root可以讓元素塊狀化，同時包含格式化上下文BFC，可以用來清除浮動，去除margin合并，實現(xiàn)兩欄自適應(yīng)布局等。

display:flow-root可以在部分項目中使用了。

display:flow

display屬性還支持一個目前處于試驗形式的值，名為flow，表現(xiàn)為元素可能是內(nèi)聯(lián)框盒子，也可能是塊級框盒子。

究竟渲染成哪個盒子與外部元素的顯示類型相關(guān)，

要么生成內(nèi)聯(lián)格式化上下文，要么生成塊級格式化上下文。如果元素外部顯示類型為inline或run-in，并且元素參與block或inline格式上下文中，則元素表現(xiàn)為inline框，否則表現(xiàn)為block容器框。

根據(jù)是否包含格式化上下文屬性（如position、float或overflow）以及元素本身是否參與塊或內(nèi)聯(lián)格式上下文，display:flow元素要么為其內(nèi)容建立新的塊格式上下文（BFC），要么將其內(nèi)容集成到其父格式上下文中。

display:flow目前兼容性不詳，估計目前沒幾個瀏覽器支持。

責任編輯：中山網(wǎng)站建設(shè)
 【網(wǎng)訊網(wǎng)絡(luò)】國家高新技術(shù)企業(yè)》十一年專注軟件開發(fā)，網(wǎng)站建設(shè)，網(wǎng)頁設(shè)計，APP開發(fā)，小程序，微信公眾號開發(fā)，定制各類企業(yè)管理軟件（OA、CRM、ERP、OMS訂單管理系統(tǒng)、WMS進銷存管理軟件等)！服務(wù)熱線：0760-88610046、13924923903，http://m.denorpool.com