Formatting Context is a concept related to how layouts are defined in an HTML document.
Everything in a page is part of the formatting context of the main <html> element. The <html> element sets the normal flow or initial block formatting context, a Block Formatting Context in its type. And a particular area of the page can have its own formatting context. Formatting context in an area of the page is generally introduced by the value of the display: property. Different values of this propertly sets the type of formatting context.
We already apply formatting contexts intuitively if we code block elements (<div>s) and inline elements (<span>s, <img>s, etc.) -- that is, how <div> elements behave and how inline elements behave in a page. This is also known as the normal flow of the document.
There are different types of formatting contexts. Notable among them are Block Formatting Context (BFC), Inline Formatting Context (IFC), Flex Formatting Context and Grid Formatting Context.
Different formatting contexts bring about their own set of layout rules to the area, both to the parent element where the display: value is applied and to its children. In other words, a formatting context establishes rules on how an element is laid out with respect to its neighbors that potentially have other formatting contexts, as well as how its children interact within the formatting context itself. These rules eventually lead to application of the Box Model on how margins, borders and padding of the parent element interact with those of neighboring elements; and how their children interact with each other.
For example, a <p> element is a block element, which has display: block by default. It establishes a Block Formatting Context. Its margins, borders and paddings will be applied to all four sides. In contrast, a <span> element inside the <p> element establishes an Inline Formatting Context. The rules for margins and paddings are different in IFC, which ignores vertical margins and paddings so line boxes are not pushed up or downwards. Flex Formatting Context and Grid Formatting Context, in comparison, introduce additional properties to the parent element, as well as to their children.
The type of formatting context applied eventually defines how the Visual Formatting Model for an area is created in the layout generation step of the Critical Rendering Path.
We can explicitly create an Independent Formatting Context with display: flow-root, which essentially creates a fresh, local Block Formatting Context similar to the initial block formatting context within the normal flow of the main <html> element.
References
Top comments (0)