[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