[css-display-3] Clarification needed on simultaneous block and inline formatting contexts for block container boxes

[gitspeaks]

In the current specification, there’s a note stating:

"A block container box can both establish a block formatting context and an inline formatting context simultaneously."

It’s not immediately intuitive how a block container could establish both a block formatting context (BFC) and an inline formatting context (FC) at the same time, as these formatting contexts typically serve different layout functions.

Questions:

1. Could you clarify what is meant by a block container box establishing both a BFC and an inline FC simultaneously?
2. Under what conditions would this occur, and how should it be expected to behave?
3. Are there specific examples that illustrate this behavior?

Thanks in advance.

[Loirooriol]

Could you clarify what is meant by a block container box establishing both a BFC and an inline FC simultaneously?

Inline layout isn't independent from block layout, both are different aspects of flow layout. So they can coexist.

Under what conditions would this occur, and how should it be expected to behave?

A block container that is forced to establish an independent formatting context will establish a BFC. But if it only contains inline-level contents, then it will also establish an inline FC.

Are there specific examples that illustrate this behavior?

<div style="display: inline-block">lorem ipsum</div>

The inline-block is a block container, and it establishes a BFC because it's not block-level. But it only has inline-level contents (the text "lorem ipsum"), so it establishes an inline FC too.

[gitspeaks]

A block container that is forced to establish an independent formatting context will establish a BFC. But if it only contains inline-level contents, then it will also establish an inline FC.

This claim, particularly the use of "also," seems contradictory to the CSS specification on "normal flow."

Quote
"9.4 Normal flow: Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context."

The idea of two contexts coexisting doesn’t appear to serve any clear purpose and, in fact, seems to contradict the CSS standard.

[Loirooriol]

It's a bit confusing but I think there is no contradiction. A box establishing 2 formatting contexts doesn't mean that its contents will participate in both of them.

So if you have an inline-block with some floats and inline-level contents, then the inline-level contents will participate in the inline FC. But floats aren't confined to inline FCs, in general they affect the entire BFC, so it would be weird to have an inline FC without a BFC.

[gitspeaks]

Thank you for clarifying! I see what you mean: when a block container sets up both a BFC and an IFC, it doesn’t mean that each type of content is part of both contexts at once. Instead, inline content stays within the IFC, while floats interact with the BFC.

My confusion seems to come from the BFC trying to do a lot of different things at once, like:

1. Handling float containment
2. Stopping margin collapse between BFCs
3. Organizing block-level elements

In contrast, the IFC just deals with the layout of inline elements.

What makes things trickier is that a block container is said to "establish" both a BFC and an IFC, but under different conditions. A BFC is set up due to certain properties of the containing element, while an IFC happens automatically if the containing element only has inline content. So, there’s a difference between explicitly creating a BFC and implicitly forming an IFC based on content.

To address this, we could introduce the term 'Flow Formatting Context' (FFC) as a primary framework for flow layout, covering float containment, margin collapse, and the arrangement of both block and inline content.

With this model:

1. If the containing element has at least one block element, everything inside gets laid out in a block format. Inline content would automatically wrap in anonymous block boxes. (BFC)
2. If the containing element has only inline elements, then everything arranges in an inline format. (IFC)

With this setup, the FFC would handle flow layout rules, setting up either a BFC (for block layout) or an IFC (for inline layout) as needed. This approach would separate inflow arrangement from float containment and margin collapse, making things simpler.

The note saying that "A block container box can both establish a block formatting context and an inline formatting context simultaneously." feels a bit redundant.

According to the CSS definition for "Inline formatting contexts", a BFC isn’t just created "at the same time" as an IFC; rather, a BFC is actually needed for an IFC to exist:

"Inline formatting contexts exist within (are part of their containing) block formatting contexts; for example, line boxes belonging to the inline formatting context interact with floats belonging to the block formatting context."

This is also noted under "Formatting Contexts":

"Additionally, some types of formatting contexts interleave and co-exist: for example, an inline formatting context exists within and interacts with the block formatting context of the element that establishes it"

These statements make it clear: a BFC is a prerequisite for an IFC, not just a coincidental overlap.

[gitspeaks]

I see this issue is now labeled as 'Closed as Question Answered.' If there are no further takeaways, should I go ahead and close it?