[css-display] "flow-root" is a confusing value for display

[smfr]

https://drafts.csswg.org/css-display-3/#display-flow-layout

The only place that CSS uses the term "flow" is in Regions (flow-from, flow-into). I think it's super confusing to have a "flow-root" value that isn't region-related, and authors don't know the term "flow layout".

Can we call it "float-container" or something?

[astearns]

+1 to making the name be more explicit about the effect, though tying it to 'float' might also be confusing. Container seems appropriate. Are there terms in common use by web devs that correlate to 'block formatting context'?

[dbaron]

I fear the term most in common use might be hasLayout, but I don't think we want that one, and I don't think it exactly matches the concept of block formatting context.

[SelenIT]

@smfr, CSS also uses the term "normal flow", as opposed to other positioning schemes. I believe that the term "flow root" comes from that meaning of "flow" (also mentioned in the block formatting section), maybe with some influence of the "sectioning root" concept from HTML5.

AFAIK, there are at least three aspects in which BFC-establishing elements differ from regular blocks:

1. Containing nested floats (most often mentioned)
2. Collapsing margins
3. Border box overlapping with floats (paragraph above the "Example" in Section 9.5 of CSS2.2)

If display:flow-root affects all of these, I suppose that naming should also reflect them all.

[mrego]

Note that this has already been implemented in Firefox and Chrome, and, if I'm not wrong, it'd be shipped in Firefox 53 and Chrome 57.
So, if we want to change the name it should be fast enough so it's not shipped with a different syntax.

[SelenIT]

I don't see much need in renaming. Are authors really more familiar with Regions (which the Chrome team even doesn't plan to support) than with phrases like "absolutely positioned elements are removed from the flow" (often used in many CSS articles for beginners) or with the "Flow content" concept from HTML5? Existing implementations also count against the renaming, IMHO.

But if the renaming is absolutely necessary, I suppose it's important to highlight that the BFC-establishing element is 'self-contained', that nothing inside it overlaps anything outside it (leaving out special cases like negative margins). What about display: enclosed-block, or separate-block, or just new-block (since it establishes the new BFC)?

[tabatkins]

Right; the term "out-of-flow" shows up plenty in specs; anyone who looks at layout specs or tutorials that use similar wording will have at least some exposure to the term.

(fantasai and I used the "flow" terminology for the two keywords because we needed some term that covered both "block" and "inline" stuff, and "flow" was already threaded thruout the specs to refer to that layout mode's concepts.)

[fantasai]

It's not just about containing floats... or even just about blocks. The 'flow' keyword (as opposed to 'flow-root') is applied to blocks to indicate that their context and their contents are all part of the same formatting context--implying a certain boundary transparency wrt margins and floats--but it also is applied to inlines to indicate the same thing, that the contents of the inline and its surrounding context all participate in the same formatting context (which in this case is about merging text runs, aligning together, performing bidi-reordering across boundaries, etc.).

"Flow" is also used to describe the content model in HTML that allows intermixing of block and inline content, and we wanted to tie into that concept.

[js-choi]

If the name is left as-is, the rationale for the name from @fantasai might well be worth including in the spec. It was usefully illuminating for me and might be for many others too.

[nadangergeo]

I propose "display: river", because there's a flow, and elements can float. To metaphorical maybe?

[SelenIT]

@nadangergeo, as for me, "display:river" fits better for display:flow (as a metaphor of the open stream of water that can carry floating things far away), flow-root is more like "display:lake" (as something completely enclosed by its banks that floating things never escape). But I'm afraid it's still too metaphorical and there is no other concept in CSS that would support this metaphor:)

[Marat-Tanalin]

There is nothing wrong with the flow-root keyword, it is quite clear and natural based on what it does.

Fwiw, if renaming was required, isolated or context would probably be viable options.

[inoas]

Considering display: flow - and how I understand it should work - would display: flow-block instead of display: flow-root make sense?

Just from the nomenclature it would also be in line with display: block vs display: inline-block in a way.

[alastc]

As an old-school CSSer, I read the description and thought it was effectively "block" but containing floats. How about block-container.

Slightly related, does it have to be on display? Could it apply to flex or grid as well? If so, perhaps a separate attribute would be more effective?

[kalleboo]

Based on the description in the spec,

The element generates a block container box, and lays out its contents using flow layout. It always establishes a new block formatting context for its contents.

I like the "flow-block" suggestion by @inoas

[SelenIT]

There is a problem with "flow-block" suggestion: there is already a display: block flow longhand value in the spec, which means just the opposite — the block that doesn't establish new block formatting context (i.e., default display:block behavior). Would be way more confusing that the current naming.

If I understand correctly, the whole flow/flow-root thing that @fantasai explains in #964 (comment) applies only to blocks and inlines (collectively referred as "flow layout") since they are the only two display values that can have the same formatting context inside as outside. It doesn't make sense for flex and grid containers since they always establish the new formatting context (different from the one they live in themselves) and therefore don't have issues like float leaking or descendant margin collapsing.

But I like the idea to have a separate property for switching new context generation on/off. Maybe this behavior has something to do with the scope of [css-containment], especially with contain:layout? Looks like something very similar from the first glimpse, and new formatting context is explicitly mentioned there.

P.S. Just after I posted this comment I found that the formatting context definition from [css-containment] already refers to flow-root as the inner display type. But maybe it could be contained in the contain spec, e.g. in form of "contain: formatting"?

[Marat-Tanalin]

As an option, we could have separate properties: one for self-clearing like self-clear, and another one for controlling collapsing margins like margin-collapse.

[Timoti]

"flow-root" is completely non-intuitive. Given this is essentially a modification of display:block, I'm for a display property name that leads with "block" , as suggested above, a seperate property.

[SelenIT]

As an inner display value, "flow-root" can be also a modification of display:inline (resulting in display:inline-block behavior).

[FremyCompany]

It was resolved in today's telcon we would not rename flow-root for lack of a name that seemed conclusively better.

Since that may be relevant to this thread, I would also note that the two-value syntax was proposed to be removed from the current draft last face-to-face, and possibly postponed for a later level.

[FremyCompany]

Though at the risk of getting @fantasai to roll her eyes at me not proposing this during the call, I wonder if "display: block-bfc" doesn't indeed convey the meaning better (as well as starting to educate people on what a bfc is and does).

Though it may also add confusion, I don't know. Not sure I am convinced myself :)

[yisibl]

I do not agree to change the name, as long as the specification is written clearly enough, the author understands the concept of BFC(block formatting context) naturally know what display: flow-root can do.