1. 基本概念
视觉格式化模型（visual formatting model）：CSS的一种机制，它规定了页面中的多个盒子如何布局。
包含块：每个元素都有一个包含块，它是指元素在页面中摆放的区域
通常情况下，元素的包含块是它父元素的内容盒（content-box）
根元素的包含块是初始化包含块（initial containing block）。
2. 定位体系概述
视觉格式化模型规定，定位体系一共有三种：
常规流（normal flow）
浮动（float）
绝对定位（absolute positioned）
任何一个元素，必须属于其中一种定位体系，不同的定位体系中，元素在包含块中的尺寸和位置会有一些差异。
3. 盒模型和定位体系
4. 常规流-盒模型中的auto值
常规流，又叫做普通流、文档流、普通文档流，常规流是最常见的定位体系，所有元素默认状态下都是常规流定位。
水平方向：常规流盒子水平方向上的尺寸，必须等于包含块的宽度，如果不行，则强行将margin-right设置为auto。
垂直方向：margin为auto：0px，height为auto：适应内容的高度。
盒子位置
盒子在包含块的垂直方向上依次摆放，依次摆放：按照HTML元素的书写顺序从上到下摆放，盒子在包含块中占据的尺寸是整个盒子的尺寸。
垂直方向上，若两个外边距相邻，则进行合并（折叠），垂直方向：水平方向上的外边距不会合并，外边距相邻：两个外边距之间没有border、padding和content，合并：均为正数取最大，均为负数取最小，一正一负则相加。
5. 当常规流遇上浮动
常规流盒子和浮动盒子混合摆放，浮动盒子在摆放时，要避开常规流盒子，常规流盒子在摆放时，无视浮动盒子，常规流盒子的自动高度计算时，无视浮动盒子 —— 高度坍塌。
清除浮动
对一个元素清除浮动，可以让该元素在摆放时，出现在浮动元素的下方，对最后一个子元素使用clear:both，可防止父元素高度坍塌。
6. 绝对定位概述
当浮动元素被设置为绝对定位
属于绝对定位，float属性被强制设置为none
绝对定位元素对其他元素的影响
绝对定位元素不会对其他任何元素造成任何影响
绝对定位元素的位置
可通过left、top、right、bottom来设置