Formatting context

Everything on a page is part of a formatting context, or an area which has been defined to lay out content in a particular way.

Types

Primary Formatting Contexts (4):

1. Block Formatting Context (BFC) - The default for block-level elements
2. Inline Formatting Context (IFC) - For inline elements within a line
3. Flex Formatting Context - Created by display: flex or display: inline-flex
4. Grid Formatting Context - Created by display: grid or display: inline-grid

Additional Specialized Contexts:

5. Table Formatting Context - For table elements
6. Ruby Formatting Context - For ruby annotations (less commonly used)

So there are 4 main formatting contexts that most developers work with regularly, and 6 total if you include the specialized table and ruby contexts. Each formatting context has its own rules for how child elements are laid out, positioned, and how they interact with each other. The Block Formatting Context is the most fundamental, while Flex and Grid are the modern layout systems that have largely replaced floats and other older positioning techniques.

Refs

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Introduction_to_formatting_contexts