Block Formatting Context: Taming Floats and Margins

Why it exists

In the default CSS layout model, some behaviors can be counter-intuitive. Floated elements are removed from the normal document flow, which can cause their parent containers not to resize to contain them. Additionally, vertical margins of adjacent block elements can collapse into each other. A Block Formatting Context (BFC) was created to give developers control over these interactions.

The mental model

Think of a BFC as a self-contained layout region on your webpage. It's like putting a box around a set of elements and telling the browser: "The layout rules inside this box don't interact with the rules outside it." It establishes a boundary for floats and margin collapsing, effectively creating a mini-layout within the main layout.

How it works

A BFC is not a property you set directly, but rather a context created by applying certain other CSS properties to an element. Properties like overflow: hidden, display: inline-block, position: absolute, and the modern display: flow-root all establish a BFC. An element that creates a BFC will do three main things: first, it will contain any floats inside it, meaning the element will expand to enclose them. Second, it will not wrap around any floats external to it. Third, the margins of elements inside the BFC will not collapse with margins outside it.

When to use it

Trigger a BFC to solve specific layout problems. The most common use case is to contain floats. If you have a container with floated children and the container's background or border isn't wrapping them, making the container a BFC will fix it. Another use is to prevent an element's text from wrapping around a preceding floated element, creating a clean column next to it.

When not to use it

Avoid creating a BFC accidentally. Using overflow: hidden or position: absolute just for a visual effect can have unintended layout consequences by creating a BFC. If you don't need to contain floats or stop margin collapse, you don't need a BFC. For most modern layouts, Flexbox and Grid are superior tools that create their own formatting contexts (flex or grid formatting contexts) and are generally easier to reason about than floats.

One canonical example

Imagine a div with a border, containing a floated img. If text next to the image is shorter than the image, the div's height will only match the text, and the taller image will "leak" out, breaking through the div's bottom border. By applying display: flow-root to the parent div, you create a BFC. This forces the div to expand its height to fully contain the floated img, and its border will correctly wrap around all its contents.