CSS的标准文档流

CSS的标准文档流是指浏览器在没有定位的情况下如何布局元素。它遵循一些基本规则：

1. 块级元素会在页面上自上而下排列。
2. 块级元素会自动填充其父元素的宽度。
3. 行内元素会在页面上自左而右排列。
4. 行内元素的宽度由内容决定。
5. 块级元素和行内元素都会被其他元素的边距（margin）影响，但不会与其他元素的内边距（padding）或边框（border）重叠。

CSS中的定位机制允许改变这种标准文档流的行为，主要有三种方式：浮动（float）、绝对定位（position: absolute）和相对定位（position: relative）。

例子：

/* 标准文档流中的块级元素 */
.block-element {
  width: 100%; /* 默认情况下，块级元素会占满父元素的宽度 */
}
 
/* 使用浮动改变文档流 */
.floated-element {
  float: left; /* 元素会浮动到其父元素的左侧，其他元素会围绕它排列 */
}
 
/* 使用绝对定位脱离文档流 */
.absolute-element {
  position: absolute; /* 元素将相对于最近的已定位的祖先元素定位，脱离标准文档流 */
  top: 10px;
  left: 10px;
}
 
/* 使用相对定位影响文档流，但不脱离文档流 */
.relative-element {
  position: relative; /* 元素将相对于其正常位置定位，但不会影响其他元素的布局 */
  top: 10px;
  left: 10px;
}

在实际应用中，定位机制允许创建复杂的布局，但需要注意的是，脱离标准文档流的元素会影响周围元素的布局，因此需要额外的布局调整来确保整体页面的稳定性。