The visual formatting model is how user agents (usually browsers) process the document tree (e.g. HTML) for visual media (e.g. your computer screen).
Each element (e.g. an H1 or div) generates boxes (see the earlier post on the “box model”).
The layout depends on:
- box size and type (e.g. div or span)
- positioning scheme (e.g. normal flow, float, absolute positioning)
- relationship between elements in the document tree
- external information (e.g. viewport (e.g. window), image size)
The model does NOT specify all aspects of formatting. E.g. it doesn’t specify a letter-spacing algorithm.
The position of an element’s box are calculated relative to a rectangle called the containing block. This can be the window or viewing area on screen (called the “viewport”).
1.2 Containing blocks
Box positions and sizes are calculated using the edges of a rectangular box called a containing block (usually the viewport) and is anchored at the canvas origin.
See other posts for more on the Visual formatting model. E.g.
Controlling box generation;
Relationships between ‘display’, ‘position’, and ‘float’;
Comparison of normal flow, floats and absolute positioning;
Plenty more here: