Block Formatting Context and Stacking Contexts

The Invisible Rules That Govern Layout

Most CSS layout bugs — collapsed margins, floats escaping containers, z-index battles — trace back to two concepts that most developers never learn properly: Block Formatting Contexts (BFC) and Stacking Contexts. These are the layout engine's internal rules for how elements flow horizontally and how they layer vertically.

Block Formatting Context (BFC)

A Block Formatting Context is an isolated layout region where block-level elements are laid out. Inside a BFC:

• Block elements stack vertically, one after another
• Each element's left edge touches the containing block's left edge
• Vertical margins between siblings collapse (unless a BFC boundary separates them)
• The BFC contains all its floated children — floats don't escape
• The BFC does not overlap adjacent floats

What Creates a New BFC?

Not every element creates a BFC. Here are the most common triggers:

/* Root element always creates a BFC */
html { }

/* overflow value other than visible */
.container { overflow: hidden; }   /* Creates BFC */
.container { overflow: auto; }     /* Creates BFC */
.container { overflow: visible; }  /* Does NOT create BFC */

/* display: flow-root — purpose-built for creating BFCs */
.container { display: flow-root; } /* Creates BFC — the clean solution */

/* Flex and grid items */
.flex-container { display: flex; } /* Each flex item is a BFC */

/* Floated elements */
.sidebar { float: left; }         /* Creates BFC */

/* Absolutely/fixed positioned elements */
.modal { position: absolute; }    /* Creates BFC */

/* Inline-blocks */
.badge { display: inline-block; } /* Creates BFC */

BFC Solves: Float Containment

The classic "collapsed container" problem. A parent contains only floated children, so it collapses to zero height:

<div class="container">
  <div class="sidebar" style="float: left; width: 200px; height: 300px;">Sidebar</div>
  <div class="content" style="float: left; width: 400px; height: 200px;">Content</div>
</div>
<!-- .container has height: 0 because floats are "out of flow" -->

Fix: Make the container a BFC.

.container {
  display: flow-root; /* Now contains its floated children, height: 300px */
}

BFC Solves: Margin Collapse Prevention

Adjacent vertical margins collapse into one (the larger wins). A BFC boundary prevents this:

.parent {
  margin-bottom: 20px;
}
.child {
  margin-top: 30px;
}
/* Without BFC: margins collapse to 30px total gap */
/* With BFC on parent (display: flow-root): 20px + 30px = 50px total */

Inline Formatting Context (IFC)

When a container holds only inline-level content (text, <span>, <a>, <em>, inline images), it creates an Inline Formatting Context. In an IFC:

• Elements are laid out horizontally, left to right
• When a line is full, content wraps to the next line
• Vertical alignment is controlled by vertical-align
• Line boxes have a computed height based on the tallest inline element on that line
• Vertical margins and padding on inline elements do not affect line height

Stacking Contexts

While BFC controls horizontal flow, Stacking Contexts control vertical layering — how elements overlap when they share the same space.

The Paint Order Within a Stacking Context

Elements within a single stacking context are painted in this exact order (back to front):

1. Background and borders of the stacking context root
2. Negatively positioned stacking contexts (z-index < 0)
3. In-flow, non-positioned block elements (normal block flow)
4. Non-positioned floats
5. In-flow, inline-level elements (text, inline boxes)
6. Positioned elements with z-index: 0 or auto
7. Positively positioned stacking contexts (z-index > 0)

What Creates a New Stacking Context?

/* position + z-index (not auto) */
.modal { position: relative; z-index: 10; } /* Creates stacking context */
.modal { position: relative; }               /* Does NOT (z-index is auto) */

/* Certain properties always create one */
.card { opacity: 0.99; }        /* Creates stacking context! */
.animated { transform: scale(1); } /* Creates stacking context */
.blurred { filter: blur(0px); }    /* Creates stacking context */
.clipped { clip-path: none; }     /* Does NOT create one unless clipping */
.mixed { mix-blend-mode: multiply; } /* Creates stacking context */
.isolated { isolation: isolate; }    /* Creates stacking context (purpose-built) */
.sticky { position: sticky; }       /* Creates stacking context */

/* Flex/grid children with z-index */
.flex-child { z-index: 1; }  /* Creates stacking context even without position */

/* will-change with certain properties */
.animated { will-change: transform; } /* Creates stacking context */

Why z-index: 9999 Doesn't Work

The most common stacking context bug: z-index only works within the same stacking context. Elements in different stacking contexts can never interleave.

/* Parent A creates stacking context at z-index: 1 */
.sidebar { position: relative; z-index: 1; }
  /* Child: z-index: 9999, but trapped inside sidebar's stacking context */
  .sidebar .tooltip { position: absolute; z-index: 9999; }

/* Parent B creates stacking context at z-index: 2 */
.main-content { position: relative; z-index: 2; }

/* The tooltip (z-index: 9999) will ALWAYS render behind .main-content
   because its parent stacking context (z-index: 1) is below
   main-content's stacking context (z-index: 2).
   z-index: 9999 is meaningless outside its parent context. */

The fix: Move the tooltip to the same stacking context level as main-content, or use isolation: isolate strategically to control context creation.

Production Scenario: The Modal Behind the Sidebar

A web app had a modal that appeared behind the sidebar on certain pages but not others. The root cause:

1. The sidebar had transform: translateX(0) for a slide-in animation — creating a stacking context
2. The modal was inside a container with z-index: 100
3. But the sidebar's stacking context had z-index: auto (effectively 0) initially, then z-index: 50 after animation
4. On pages where the sidebar was animated, it created its own stacking context, and the modal's parent context was below the sidebar's

The fix: Use isolation: isolate on the app shell to create a controlled stacking context hierarchy, and portal the modal to document.body so it sits at the root stacking context level.