A block formatting context is a part of a visual CSS rendering of a Web page. It is 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 one of the following:
- the root element or something that contains it
- floats (elements where
float
is notnone
) - absolutely positioned elements (elements where
position
isabsolute
orfixed
) - 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), orinline-table
- block elements where
overflow
has a value other thanvisible
display
: flow-root
- elements with
contain
: layout
,content
, orstrict
- flex items (direct children of the element with
display
: flex
orinline-flex
) - grid items (direct children of the element with
display
: grid
orinline-grid
) - multicol containers (elements where
column-count
orcolumn-width
is notauto
, including elements withcolumn-count: 1
) column-span
: all
should always create a new formatting context, even when thecolumn-span: all
element isn't contained by a multicol container (Spec change, Chrome bug).
A block formatting context contains everything inside of the element creating it.
Block formatting contexts are important for the positioning (see float
) and clearing (see clear
) of floats. The rules for positioning and clearing of floats apply only to things within the same block formatting context. Floats do not affect the layout of the content inside other block formatting contexts, and clear only clears past floats in the same block formatting context. Margin collapsing also occurs only between blocks that belong to the same block formatting context.
Specifications
See also
float
,clear
- CSS Key Concepts: CSS syntax, at-rule, comments, specificity and inheritance, the box, layout modes and visual formatting models, and margin collapsing, or the initial, computed, resolved, specified, used, and actual values. Definitions of value syntax, shorthand properties and replaced elements.