How many CSS formatting contexts are there?

Question

I'm reading CSS2.1 spec. I know "block formatting context", "inline formatting context", "table/grid/flex formatting context".

I want to know, how many kinds of "formatting context" are there? Is there a complete list?

Answer 1

In general, a "formatting context" is simply an area in which descendant boxes of a certain kind (e.g. block, inline, flex-item) are laid out (or formatted) in normal flow.

In CSS2.1, there are only two kinds of formatting context: block and inline. Both of these are described as appropriate in section 9.4. There is no such thing as a table formatting context, at least not as defined by CSS2.1; instead it simply says that a table box establishes a block formatting context, however its contents are laid out in a tabular fashion.

Other types of formatting context are defined in their respective CSS3 modules, so there may not be an exhaustive list. That said, some examples include:

• Flexbox: flex containers establish flex formatting contexts.
• Grid Layout: grid containers establish grid formatting contexts.