Formatting contexts
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. A block formatting context (BFC) will lay child elements out according to block layout rules, a flex formatting context will lay its children out as flex items, etc. Each formatting context has specific rules about how layout behaves when in that context.
Block formatting contexts
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.
Inline formatting contexts
Inline formatting contexts exist inside other formatting contexts and can be thought of as the context of a paragraph. The paragraph creates an inline formatting context inside which such things as <strong>, <a>, or <span> elements are used on text.
References
- Introduction to formatting contexts - CSS: Cascading Style Sheets | MDN (opens in a new tab)
- Block formatting context - Developer guides | MDN (opens in a new tab)
- Understanding Block Formatting Contexts in CSS - SitePoint (opens in a new tab)
- Describe Block Formatting Context (BFC) and how it works. (opens in a new tab)