Alayout mode, sometimes calledlayout, is aCSS algorithm that determines the position and size of element boxes based on the way they interact with their sibling and ancestor boxes.

There are several layout modes:

Flow layout or normal flow

All elements are part of normal flow until you do something to take them out of it.Normal flow includes:

Block layout

Designed for laying out boxes such as paragraphs.

Inline layout

Designed for laying out inline items such as text.

Table layout

Designed for laying out tables.

Float layout

Designed to cause an item to position itself left or right with the rest of the content in normal flow wrapping around it.

Positioned layout

Designed for positioning elements without much interaction with other elements.

Multi-column layout

Designed for laying content out in columns as in a newspaper.

Flexible box layout

Designed for laying out complex pages that can be resized smoothly.

Grid layout

Designed for laying out elements relative to a fixed grid.

See also

• Visual formatting model
• CSS display module