What is Formatting Context in CSS? Describe a few types of Formatting Contexts.
Tags: css, webdev, html, beginners
Published: 2022-06-21 06:55:16

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

1. [Introduction to formatting contexts](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts)
2. [Formatting contexts and the display property
](https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model#formatting_contexts_and_the_display_property)