Document Flow

Document flow refers to the order in which elements are rendered by the browser (and thus the order in which they appear on screen). There are multiple ways to alter this flow.

Normal Flow

This is the default; objects appear in the order in which they were coded. In many cultures, this implies a left-to-right and top-down sequence.

Altering Normal Flow

There are several approaches to altering normal flow.

  1. Float property
    1. Often used with the clear property
    2. The float property is commonly used to create 2-column and 3-column layouts (note that there are better approaches now)
  2. Positioning property
    1. Values include static, fixed, relative, absolute, and sticky
  3. CSS Columns
  4. Flexbox
  5. Grid

Note that Flexbox and Grid are covered in INFS 415.