Visual formatting model

Reference: CSS 2.2 Visual formatting model

Introduction
1. Terms
Normal flow
Box generation
1. Display properties
Positioning schemes
1. Forced block-level display values

Introduction

In CSS 2.2 elements generate boxes, these are laid out in certain formatting contexts and positioning schemes.

The type of box that is generated determines what formatting context an element is positioned in and can be controlled with the display property.
The positioning scheme of a box is determined by the values of an element's position and float properties, and this can also change the type of box that is generated.

Terms

Formatting context	A context where a set of related boxes are laid out according to rules for the particular type of formatting context. A box can: Continue using the existing formatting context. Establish an independent formatting context, this is a new formatting context which does not interact with its containing formatting context. Establish a new formatting context which co-exists with the existing formatting context. E.g. an inline formatting context will interact with its containing block formatting context.
Containing block	Many things in CSS are calculated according to an element's containing block. It is always some ancestor of the element. See here for more details.
Block formatting context	Lays elements out vertically, see here for more details.
Block-level box	Participates in a block formatting context.
Block container box	Contains all block-level boxes which participate in a block formatting context or all inline-level boxes which participate in an inline formatting context. All block-level boxes except tables or the principal box of a replaced element are block containers.
Block box	Box that is block-level AND a block container.
Anonymous block box	Box that wraps any inline-level boxes in a block container with mixed children. If an inline-level element has block-level children this can cause the children to become direct children of the block container, see examples here.
Inline formatting context	Lays elements out horizontally in lines, see here for more details.
Inline-level box	Participates in an inline formatting context.
Inline box	Box that is inline-level and whose contents participates the same inline formatting context as the box iteself.
Line box	Contains inline-level boxes in a single line. More are created when the line is too wide.
Atomic inline-level box	Inline-level boxes that aren't inline boxes, i.e. whose contents doesn't participate in its containing inline formatting context.
Replaced element	An element whose content is outside the scope of the CSS formatting model, e.g. images or iframes. May have intrinsic dimensions (width, height or ratio) which are used in some layout calculations. Relevant elements: `img`, `input type=img`, `canvas`, `iframe`, `embed`, `object`, `audio`, `video`.

Normal flow

Block formatting context

A block formatting context:

Lays boxes out vertically from the top of a containing block.
Margin space between blocks can collapse.
Each boxes left edge touches the left edge of its containing block (with the exception where there is a left floated element and the box establishes a new block formatting context).

Block container vs new block formatting context

A block container may or may not establish a new block formatting context. What are the practical differences if it does or doesn't?

Margins don't collapse across block formatting contexts.
Floats
- A new block formatting context won't overlap margins with a float.
- Floats only interact with elements in the same block formatting context, including clearing.

See here for some live examples.

Inline formatting context

An inline formatting context:

Lays boxes out horizontally from the top of a containing block.
The area that contains inline-level boxes in a line is the line box.
Boxes can be aligned vertically with the line box.
The width of a line box is determined by the containing block and any floats.
Each line boxes left edge touches the left edge of its containing block (with the exception where there is a left floated element which pushes the line box out of the way).
The height of a line box is determined by line height calculations and can vary between lines.
If multiple inline-level boxes can't fit in a line more lines are created which the boxes spill into.
If a single inline-level box can't fit into a single line box then it will be split across lines if it can be split (e.g. multiple words in a single inline-level box), otherwise it will overflow.

See here for some live examples.

When are block, inline and table formatting contexts established?

Formatting context	Established by
Block	Block boxes with `overflow` other than `visible` (e.g. `display: block`). Block containers that aren't block-level (e.g. `inline-block`). Floats. Absolutely positioned elements.
Inline	Block containers that contain only inline-level children.
Table	Elements that are `display: table` or `display: inline-table` generate: A principal table wrapper box which is a block container AND establishes a block formatting context (note this is different to above where block boxes don't establish a block formatting context unless they have an `overflow` other than `auto`). A table box which is a child of the table wrapper which is block-level and establishes a table formatting context.

Box generation

The display property controls the type of box that an element generates. See the tables below for what types of boxes display values end up generating.

Display properties

`display`	Block-level box?	Block-container?	Block box?	Inline-level box?	Inline box?	Atomic inline-level box?	Other information
`block`	Yes	Yes	Yes	No	No	No	Generates a principal block box.
`inline`	No	No	No	Yes	Yes	No	Generates one or more inline boxes.
`inline-block`	No	Yes	No	Yes	No	Yes	Generates a principal inline-level block container.
`list-item`	Yes	Yes	Yes	No	No	No	Generates a marker box.
`table`	Yes	No	No	No	No	No	Behaves according to table rules.
`inline-table`	No	No	No	Yes	No	Yes	Behaves according to table rules.
`none`	No	No	No	No	No	No	Displays nothing and does not affect page in any way.

Positioning schemes

CSS 2.2 lays out boxes in three positioning schemes: normal flow, floats and absolute positioning. Additionally a box can be relatively positioned in some of these schemes.

The position and float properties determine how a box is positioned. See the table below for details:

Positioning scheme	Supported `position` values	Supported `float` values	Supported `display` values	In flow?	Establishes formatting context (for children)?	Notes
Normal flow	`static` `relative`	`none` (if set to `left` or `right` becomes a float)	All	Yes	Possibly block, inline or table. See table below.	Boxes in normal flow belong to (as opposed to establish) a formatting context of block, inline or table (in CSS 2.2). First laid out in normal flow, then positioned relatively if set.
Floats	`static` `relative`	`left` `right`	Basically forced to be block-level (see table below).	No (or so it claims, but line boxes flow around it)	Block	First laid out in normal flow, then shifted to the left or right. Line boxes flow along side. Finally positioned relatively if set.
Absolute positioning	`absolute` `fixed`	Forced to `none`.	Basically forced to be block-level (see table below).	No	Block	Removed from normal flow entirely and positioned relative to containing block. `fixed` position is the same but its containing block is the viewport.

Forced block-level display values

Initial value	Final value
`block` `table` `table-cell` `list-item` `none`	As specified
`inline` `inline-block` `table` descendants except `table-cell`	`block`
`inline-table`	`table`