Menu
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?
908
A block formatting context (BFC) is a part of a visual CSS rendering of a web page. It's the region in which the layout of block boxes occurs and in which floats interact with other elements. A block formatting context is created by at least one of the following: The root element of the document ( <html> ).
Creating a Block Formatting ContextA new block formatting context can be created by adding any one of the necessary CSS conditions like overflow: scroll , overflow: hidden , display: flex , float: left , or display: table to the container.
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:
76
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
