Master the CSS property display:flow-root declaration in one article

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

This article is welcome to be shared and aggregated. There is no need to reprint the full text. Please respect copyright. The circle is so small. If you need it urgently, you can contact us for authorization.

1. Safari browser supports

When display:flow-root was first released, I looked at its compatibility and was wondering when it would be usable in a production environment. Today, I encountered it again and checked its compatibility. Hey, boy, it’s pretty good. Safari browser has supported it since version 13, so it will soon be widely used.

2. What is display:flow-root used for?

Elements, whether inline or originally block-level, become block-level elements after display:flow-root declaration is applied. At the same time, this element will establish a new block-level formatting context, which is commonly referred to in the industry as BFC.

Regarding BFC, you can refer to my previous classic article: "CSS in-depth understanding of fluid characteristics and multi-column adaptive layout under BFC characteristics".

In addition to being used for layout, BFC can also clear floats and remove margin merging. Therefore, display:flow-root also has a similar effect. Compared with block-level format contexts generated by features such as float, position, or overflow, inline-block, display:flow-root will not bring additional side effects to the elements. For example, although overflow:hidden can remove the interference of floats, it may prevent child elements from being positioned outside the container.

Using display:flow-root does not have such worries.

For example, in the following example, the container has an outline and the child elements are floated:

<p><img src="mm.jpg"></p>
p {
    outline: solid deepskyblue;    
}
img {
    float: left;
}

The resulting contours are merged together, as shown below:

At this point, as long as display:flow-root is set for the <p> element, the problem of element height collapse caused by floating will no longer exist:

p {
    display: flow-root;
}

The effect is shown in the following screenshot:

Similarly, the phenomenon of margin property merging can also be prevented using display:flow-root .

The HTML code is as follows:

<div class="box">
    <p>margin: 2em;</p>
</div>
<div class="box flow-root">
    <p>margin: 2em;</p>
</div>

The CSS is as follows:

.box {
    background-color: #f0f3f9;    
}
.box p {
    outline: solid deepskyblue;
    margin: 2em;
}
.flow-root {
    display: flow-root;
}

As a result, the margin of the upper container element is penetrated, while the margin penetration of the lower container element is prevented because display:flow-root is set. As a result, the space occupied by the <p> element inside appears larger, as shown in the following figure:

Both of the above examples have demos to experience. You can click here to see the demo of display:flowt-root:

display:flow-root can also be used in conjunction with the float attribute to achieve a two-column adaptive layout effect.

For example:

<div class="box flow-root">
    <img src="mm.jpg">
    <p class="flow-root">Pinduoduo soared 7%, its market value exceeded US$70 billion, surpassing JD.com. Huang Zheng's personal wealth is also the third richest person in mainland China.
</div>

.box img {
    float: left;
    margin-right: 20px;
}
.box p {
    background-color: #f0f3f9;
    padding: 10px;
}
.flow-root {
    display: flow-root;
}

The real-time effect is as follows:

Pinduoduo soared 7%, and its market value exceeded US$70 billion, surpassing JD.com. Huang Zheng's personal wealth ranks him third among the richest people in mainland China.

3. Conclusion

Summarize the main points of this article

display:flow-root can make elements block-shaped and include the formatting context BFC, which can be used to clear floats, remove margin merging, and achieve two-column adaptive layout.

display:flow-roo t can be used in some projects.

display:flow

display property also supports a currently experimental value called flow , which indicates that the element may be either an inline box or a block box.

Which box is rendered depends on the display type of the outer element.

Either generates an inline formatting context or a block formatting context. If the element's external display type is inline or run-in, and the element participates in a block or inline formatting context, then the element behaves as an inline box, otherwise it behaves as a block container box.

Depending on whether formatting context properties are included (such as position , float , or overflow ), and whether the element itself participates in a block or inline formatting context, display:flow element either establishes a new block formatting context (BFC) for its contents, or integrates its contents into its parent formatting context.

The compatibility of display:flow is currently unknown, and it is estimated that few browsers support it.

I will introduce it in detail when it matures.

This is the end of this article about mastering CSS display:flow-root declaration in one article. For more relevant CSS display:flow-root content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!