Block formatting context

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.

A block formatting context is created by at least one of the following:

The root element of the document (<html>).
Floats (elements where float isn't none).
Absolutely positioned elements (elements where position is absolute or fixed).
Inline-blocks (elements with display: inline-block).
Table cells (elements with display: table-cell, which is the default for HTML table cells).
Table captions (elements with display: table-caption, which is the default for HTML table captions).
Anonymous table cells implicitly created by the elements with display: table, table-row, table-row-group, table-header-group, table-footer-group (which is the default for HTML tables, table rows, table bodies, table headers, and table footers, respectively), or inline-table.
Block elements where overflow has a value other than visible and clip.
Elements with display: flow-root.
<button> elements and button <input> types defaulting to display: flow-root.
Elements with contain: layout, content, or paint.
Flex items (direct children of the element with display: flex or inline-flex) if they are neither flex nor grid nor table containers themselves.
Grid items (direct children of the element with display: grid or inline-grid) if they are neither flex nor grid nor table containers themselves.
Multicol containers (elements where column-count or column-width isn't auto, including elements with column-count: 1).
column-span: all, even when the column-span: all element isn't contained by a multicol container.

Formatting contexts affect layout because an element that establishes a new block formatting context will:

contain internal floats.
exclude external floats.
suppress margin collapsing.

Flex and grid containers, defined by setting an element's (display to flex, grid, inline-flex, or inline-grid), establishes a new flex or grid formatting context. These are similar to block formatting context except there are no floating children available inside a flex or grid container, but these formatting contexts do exclude external floats and suppress margin collapsing.

Examples

Let's have a look at a couple of these in order to see the effect creating a new BFC.

Contain internal floats

using display: flow-root

The display: flow-root value lets us create a new BFC without any other potentially problematic side-effects. Using display: flow-root on the containing block creates a new BFC.

With display: flow-root; on the <div>, everything inside that container participates in the block formatting context of that container, and floats will not poke out of the bottom of the element.

The value name of flow-root makes sense when you understand you are creating something that acts like the root element (<html> element in browser) in terms of how it creates a new context for the flow layout inside it.

This is the default rendering for <button> elements and button <input> types meaning button's create a new BFC as long as their display value isn't set to a value that doesn't automatically create a new BFC.

<section>
  <div class="box1">
    <div class="float">I am a floated box!</div>
    <p>I am content inside the container.</p>
  </div>
</section>
<section>
  <div class="box2">
    <div class="float">I am a floated box!</div>
    <p>I am content inside the <code>overflow:auto</code> container.</p>
  </div>
</section>
<section>
  <div class="box3">
    <div class="float">I am a floated box!</div>
    <p>I am content inside the <code>display:flow-root</code> container.</p>
  </div>
</section>

Block formatting context

Examples

Contain internal floats

Refs

On this page