The visual formatting model translates this sentence into English.

Basic Concepts of the Visual Formatting Model

The visual formatting model is a core mechanism in CSS that describes how elements are laid out and rendered on a page. It defines how browsers calculate the dimensions, positions, and relationships of each element based on CSS properties. This model treats every element in a document as a rectangular box, and these boxes are arranged according to specific rules to form the final page layout.

The visual formatting model primarily involves three types of boxes:

• Block-level boxes
• Inline-level boxes
• Anonymous boxes

<div style="border: 1px solid red; padding: 10px;">
  This is a block-level box
  <span style="border: 1px solid blue;">This is an inline box</span>
</div>

The Concept of Containing Blocks

The containing block is a key concept in the visual formatting model, determining the reference frame for calculating an element's position and dimensions. The containing block for each element is defined as follows:

1. The containing block of the root element (html) is called the initial containing block, typically matching the viewport size.
2. The containing block of non-root elements depends on their position property:
   • static/relative: The content area of the nearest block-level ancestor.
   • absolute: The padding area of the nearest ancestor with a position value other than static.
   • fixed: The viewport.

.container {
  position: relative;
  width: 500px;
  height: 300px;
  border: 1px solid #000;
}

.child {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background: red;
}

Formatting of Block-Level Elements

Behavioral characteristics of block-level elements in the visual formatting model:

1. By default, they occupy the full width of their containing block.
2. Height is determined by content, padding, border, and margin.
3. Adjacent block-level elements in the vertical direction experience margin collapsing.
4. They are arranged sequentially from top to bottom in the document flow.

<style>
  .block {
    width: 200px;
    height: 100px;
    margin: 20px;
    background: lightblue;
  }
</style>

<div class="block">Block-level element 1</div>
<div class="block">Block-level element 2</div>

Formatting of Inline-Level Elements

Behavioral characteristics of inline-level elements in the visual formatting model:

1. They do not occupy a full line but share line space with other inline elements.
2. Width and height are determined by content; setting width/height has no effect.
3. Vertical padding, borders, and margins do not affect line height.
4. line-height can be set to control the height of inline boxes.

<style>
  span {
    padding: 10px;
    margin: 10px;
    background: lightgreen;
    line-height: 2;
  }
</style>

<p>This is a paragraph containing <span>inline elements</span>, demonstrating the formatting behavior of inline elements.</p>

Positioning Schemes

The visual formatting model provides three main positioning schemes:

1. Normal flow:

   • Includes block formatting contexts and inline formatting contexts.
   • Elements are arranged in the order of the HTML document.

2. Float:

   • Elements are removed from the normal flow and moved left or right.
   • Other content flows around the floated element.

3. Absolute positioning:

   • Elements are completely removed from the document flow.
   • Positioned relative to their containing block.

.float-example {
  float: left;
  width: 150px;
  height: 100px;
  background: yellow;
}

.absolute-example {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 50px;
  background: pink;
}

Formatting Contexts

Formatting contexts are an important concept in the visual formatting model, determining how elements interact with their children and siblings:

1. Block Formatting Context (BFC):

   • Internal block-level boxes are arranged vertically.
   • Do not overlap with floated elements.
   • Contain floated elements.
   • Prevent margin collapsing.

2. Inline Formatting Context (IFC):

   • Inline boxes are arranged horizontally.
   • Use text-align and vertical-align for alignment.
   • May contain multiple line boxes.

/* Common ways to create a BFC */
.container {
  overflow: hidden; /* or auto */
  /* or display: flow-root; */
  /* or position: absolute/fixed */
  /* or float: left/right */
}

Stacking Order

The stacking order in the visual formatting model determines the display priority of elements on the z-axis:

1. Background and borders (lowest)
2. Elements with negative z-index
3. Block-level boxes
4. Floated elements
5. Inline boxes
6. Positioned elements with z-index: auto or 0
7. Positioned elements with positive z-index (highest)

.box1 {
  position: relative;
  z-index: 1;
  background: rgba(255,0,0,0.5);
}

.box2 {
  position: absolute;
  z-index: 2;
  background: rgba(0,0,255,0.5);
}

Practical Application Example

A layout example comprehensively applying the visual formatting model:

<style>
  .layout {
    display: flow-root; /* Create BFC */
    width: 800px;
    margin: 0 auto;
    background: #f5f5f5;
  }
  
  .header {
    height: 80px;
    background: #333;
    color: white;
  }
  
  .sidebar {
    float: left;
    width: 200px;
    padding: 20px;
    background: #ddd;
  }
  
  .main {
    margin-left: 240px;
    padding: 20px;
    background: white;
  }
  
  .footer {
    clear: both;
    height: 60px;
    background: #333;
    color: white;
  }
</style>

<div class="layout">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main">Main Content</div>
  <div class="footer">Footer</div>
</div>

Modern Extensions to the Visual Formatting Model

With the evolution of CSS, the visual formatting model has been extended with new features:

1. Flexbox layout:

   • Creates flexible containers and items.
   • Concepts of main axis and cross axis.
   • Flexible sizing and alignment control.

2. Grid layout:

   • Two-dimensional grid system.
   • Explicit track definitions.
   • Precise item placement.

/* Flexbox example */
.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Grid example */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
}

Browser Rendering and the Visual Formatting Model

The process by which browser rendering engines handle the visual formatting model:

1. Parse HTML to build the DOM tree.
2. Parse CSS to build the CSSOM tree.
3. Combine DOM and CSSOM to form the render tree.
4. Calculate layout (reflow):
   • Determine the position and dimensions of each element.
5. Paint (repaint):
   • Fill pixels onto the screen.

// Example of forced synchronous layout (performance issue)
function forceLayout() {
  const element = document.getElementById('example');
  const width = element.offsetWidth; // Triggers forced layout
  element.style.width = (width + 10) + 'px';
}