Layout mode
A CSS layout mode, sometimes simply called layout, is an algorithm that determines the position and size of boxes based on the way they interact with their sibling and ancestor boxes. There are several of them:
-
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 and inline layout, which lays 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.
Note: Not all CSS properties apply to all layout modes. Most of them apply to one or two of them and have no effect if they are set on an element participating in another layout mode.
See also
- 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.