# 视觉格式化模型
视觉格式化模型，大体上将页面中盒子的排列分为三种方式：
- 常规流
- 浮动
- 定位
# 常规流布局
常规流又称为文档流、普通文档流、常规文档流
所有元素，默认情况下，都属于常规流布局
总体规则：块盒独占一行，行盒水平依次排列
包含块（containing block）：每个盒子都有它的包含块，包含块决定了盒子的排列区域。
绝大部分情况下：盒子的包含块，为其父元素的内容盒
# 块盒
- 每个块盒的总宽度，必须刚好等于包含块的宽度
宽度的默认值是 auto
margin 的取值也可以是 auto，默认值 0
auto：将剩余空间吸收掉
width 吸收能力强于 margin
若宽度、边框、内边距、外边距计算后，仍然有剩余空间，该剩余空间被 margin-right 全部吸收
在常规流中，块盒在其包含快中居中，可以定宽、然后左右 margin 设置为 auto。
- 每个块盒垂直方向上的 auto 值
height:auto， 适应内容的高度
margin:auto， 表示 0
- 百分比取值
padding、宽、margin 可以取值为百分比
以上的所有百分比相对于包含块的宽度。
# 高度的百分比
# 情况 1：包含块的高度由内容决定
现象：
- 父元素未显式设置高度（即 height: auto）
- 子元素设置 height: 50% 无效
原理：
循环依赖：父元素高度默认由子元素撑开（auto），而子元素试图基于父元素高度计算百分比，形成逻辑死循环。
浏览器处理：当包含块的高度为 auto 时，子元素的百分比高度会回退为 auto（即由内容决定）
# 情况 2：包含块的高度显式定义
现象：
- 父元素显式设置高度（如 height: 300px）
- 子元素设置 height: 50% 有效
原理：
- 明确参照基准：父元素高度已明确（非 auto），子元素的百分比基于该值计算。
- 计算方式：子元素高度 = 父元素高度 × 百分比。
- 上下外边距的合并
两个常规流块盒，上下外边距相邻，会进行合并。
两个外边距取最大值。
# 浮动
# 应用场景
- 文字环绕
- 横向排列
# 浮动的基本特点
修改 float 属性值为：
- left：左浮动，元素靠上靠左
- right：右浮动，元素靠上靠右
默认值为 none
- 当一个元素浮动后，元素必定为块盒(更改 display 属性为 block)
- 浮动元素的包含块，和常规流一样，为父元素的内容盒
# 盒子尺寸
- 宽度为 auto 时，适应内容宽度
- 高度为 auto 时，与常规流一致，适应内容的高度
- margin 为 auto，为 0.
- 边框、内边距、百分比设置与常规流一样
# 盒子排列
- 左浮动的盒子靠上靠左排列
- 右浮动的盒子考上靠右排列
- 浮动盒子在包含块中排列时，会避开常规流块盒
- 常规流块盒在排列时，无视浮动盒子
- 行盒在排列时，会避开浮动盒子
- 外边距合并不会发生
如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒。
# 高度坍塌
高度坍塌的根源：常规流盒子的自动高度，在计算时，不会考虑浮动盒子
清除浮动，涉及 css 属性：clear
- 默认值：none
- left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方
- right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
- both：清除左右浮动，该元素必须出现在前面所有浮动盒子的下方
# 定位
# position 属性
- 默认值：static，静态定位（不定位）
- relative：相对定位
- absolute：绝对定位
- fixed：固定定位
一个元素，只要 position 的取值不是 static，认为该元素是一个定位元素。
定位元素会脱离文档流（相对定位除外）
一个脱离了文档流的元素：
- 文档流中的元素摆放时，会忽略脱离了文档流的元素
- 文档流中元素计算自动高度时，会忽略脱离了文档流的元素
# 相对定位
不会导致元素脱离文档流，只是让元素在原来位置上进行偏移。
可以通过四个 CSS 属性对设置其位置：
- left
- right
- top
- bottom
盒子的偏移不会对其他盒子造成任何影响。
# 绝对定位
- 宽高为 auto，适应内容
- 包含块变化：找祖先中第一个定位元素，该元素的填充盒为其包含块。若找不到，则它的包含块为整个网页（初始化包含块）
# 固定定位
其他情况和绝对定位完全一样。
包含块不同：固定为视口（浏览器的可视窗口）
# 定位下的居中
某个方向居中：
- 定宽（高）
- 将左右（上下）距离设置为 0
- 将左右（上下）margin 设置为 auto
绝对定位和固定定位中，margin 为 auto 时，会自动吸收剩余空间
# 多个定位元素重叠时
堆叠上下文
设置 z-index，通常情况下，该值越大，越靠近用户
只有定位元素设置 z-index 有效
z-index 可以是负数，如果是负数，则遇到常规流、浮动元素，则会被其覆盖
# 补充
- 绝对定位、固定定位元素一定是块盒
- 绝对定位、固定定位元素一定不是浮动
- 没有外边距合并