Layout mode

{{CSSRef}} 

A CSS layout mode, sometimes 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-rules
  • Comments
  • Specificity
  • Inheritance
  • Box model
  • Visual formatting models
  • Margin collapsing
  • Values
    • Initial values
    • Computed values
    • Used values
    • Actual values
  • Value definition syntax
  • Shorthand properties
  • Replaced elements