The visual formatting model explains how browsers process elements and their relative positions within a document tree for visual media.

According to the box model each element in a document tree generates zero or more boxes. There are four parameters that define mentioned boxes and these are:

  • box dimensions and type;
  • positioning scheme;
  • relationship between elements in the document tree;
  • external information (viewport size, intrinsic dimensions...).

A document tree is served to the users via a viewport. If the viewport is being resized the document layout might end up being re-sized comparing to the initial containing block, and if it becomes smaller then the area on which the document is rendered a browser should provide some scrolling system.

Most of the box dimensions and positions are being calculated with the respect to its containing block; therefore each generated box is positioned with the respect to its parent containing block but it is not confined by it or with other words it may overflow.

In respect to the elements flow in a tree, beside the positioning scheme applied, a position of an element depends on its type, or whether it's a block-level or inline-level box element.

 

›› go to examples ››