视觉格式化模型
盒模型： 规定单个盒子的规则
视觉格式化模型（布局规则）：页面中的多个盒子的排列规则
视觉格式化模型大体上将盒子的排列分为三种方式：
- 常规流
- 浮动
- 绝对定位
常规流布局
常规六、文档流、普通文档流，常规文档流。
所有元素，默认情况下，都属于常规流布局。
总体规则：快盒独占一行，行盒水平依次排列。
包含块（containing block）
每个盒子都有它的包含块，包含块决定了盒子的排列区域
可以理解为盒子的参考系
绝大部分情况下： 盒子的包含块为其父元素的内容盒
块盒
- 每个块盒的总宽度（content+padding+border+margin），必须等于包含块的宽度
宽度的默认值为auto，auto在这表示：将剩余空间吸收；margin的取值也可以是auto，默认值0；width的吸收能力强于margin。若宽度、填充、边框、外边距计算后，仍然有剩余空间，该空间被margin-right全部吸收。
-
每个块盒垂直方向上的auto值
hight：auto， 适应内容的高度
margin:auto，表示0 -
百分比取值
除高度，其他设置百分比都相对于包含块的宽度
高度的百分比：
1）. 包含块的高度取决于子元素的高度，设置百分比无效
2）. 包含块的高度不取决于子元素的高度，百分比相对于父元素的高度
- 相邻外边距的合并
浮动
应用场景
- 文字环绕
- 横向排列
浮动的基本特点
float：默认值auto
- left：左浮动，元素靠上靠左
- right：右浮动，元素靠上靠右
- 当一个元素浮动后，元素必定为块盒（会更改display为block）
- 浮动元素的包含块与常规流一致为父元素的内容盒
盒子尺寸
- 宽度为auto时，适应内容高度
- 高度为auto时，与常规流一致，适应内容高度
- margin为auto， 为0
- border，padding百分比设置于常规流一样
浮动元素不会吸收剩余空间
盒子排列
- 左浮动的盒子先靠上在靠左排列
- 右浮动的盒子先靠上在靠右排列
- 浮动盒子在包含块中排列时，会避开常规流块盒
- 常规流块盒在排列时无视浮动元素
- 行盒在排列时会避开浮动元素
- 外边距合并不会发生
如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒
高度坍塌
高度坍塌的根源：常规流盒子的自动高度，在计算时，不会考虑浮动元素
清除浮动，clear
- 默认值：none
- left：清除左浮动，添加该样式的元素必须出现在前面所有左浮动元素盒子的下方
- right：清除右浮动，添加该样式的元素必须出现在前面所有右浮动元素盒子的下方
- both：清除左右浮动，添加该样式的元素必须出现在前面所有浮动元素盒子的下方
clearfix::after {
content: '';
display: block;
clear: both;
}
定位
一个元素，只要position的取值不为static，认为该元素是一个定位元素
定位元素会脱离文档流（相对定位除外）
一个脱离了文档流的元素：
- 文档中的元素摆放时，会忽略脱离了文档流的元素
- 文档流中计算自动高度时，会忽略脱离了文档流的元素
相对定位
不会脱离文档流，在原来位置进行偏移，盒子的偏移不会对其他盒子造成任何影响
绝对定位
- 宽度为auto，适应内容
- 包含块变化：找祖先中第一个定位元素，该元素的填充盒为其填充块。若找不到，则它的包含块为整个网页（初始包含块）
固定定位
其他情况与绝对定位一致
包含块不同：固定为视口（浏览器的可视窗口）
定位下的居中
某个方向上
- 定宽（高）
- 将左右（上下）距离设置为0
- 将左右（上下）margin设置为auto
绝对定位和固定定位，margin为auto时，会自动吸收剩余空间
对各定位元素重叠时
堆叠上下文
设置z-index，只有定位元素设置有效
z-index为负数时，会被常规流，浮动元素覆盖
补充
- 定位元素为块盒display为block
- 定位元素不能浮动float为none
- 没有外边距合并