1. 顺序流布局:元素按照 HTML 中的顺序从上到下排列。块级元素(block-level elements)独占一行,内联元素(inline elements)则并排排列。
  2. 块级元素:块级元素(如 <div>, <p>, <section> 等)默认会填充父容器的宽度,并且前后带有换行符。
  3. 内联元素:内联元素(如 <span>, <a>, <img> 等)不会独占一行,它们会与其他内联元素并排显示,直到填满行宽。
  4. 格式化上下文:文档流中的元素会生成块级格式化上下文(BFC)或内联格式化上下文(IFC),这决定了元素如何相对于彼此进行布局。
  5. 包含块:每个元素都有一个包含块(containing block),这是用于计算元素尺寸和定位的参考区域。对于块级元素,通常是其父元素的内容区域;对于内联元素,可能是行框(line box)。
  6. 外边距折叠:在文档流中,垂直方向上的相邻块级元素的外边距会发生折叠,即它们之间的外边距只会保留较大的那个,而不是累加。
  7. 浮动元素:浮动元素(float)会脱离文档流,并且不会影响后续块级元素的布局,但会影响内联元素的布局。
  8. 清除:清除(clear)属性用于将元素放置在所有浮动元素之下,确保它不会与浮动元素重叠。
  9. 定位方案:文档流中的元素可以使用不同的定位方案(static, relative, absolute, fixed, sticky),其中 static 是默认值,而其他定位方案会使元素脱离文档流。
  10. 百分比尺寸:在文档流中,元素的宽度和高度的百分比是相对于其包含块计算的。
  11. 自动高度:大多数块级元素没有设置高度时,会根据内容自动调整高度。
  12. 盒模型:文档流中的每个元素都可以视为一个盒子,遵循 CSS 盒模型,包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。