前言
最近几周我一直在看 CSS 规范，下来感受就是，真·心乱如麻。也就是 CSS 是真的简单，真的，你说你 JS 巨佬，我膜拜，HTML 大师，我 respect，CSS 专家，呃，你是写规范的吗，出来咱俩比划比划，别怪我不讲武德。
对于 CSS 本身，真的可以做到战略上藐视。只要你对它的知识体系有一个逻辑合理且基本完备的认知，所有的问题都不过是技巧层面的。
当然，由于 CSS 如何起效、如何表现最后其实是浏览器说了算，因此单纯地从 CSS 语言角度出发是无法获得完整的应用知识的，这是后话，暂且不表，这篇文章我们主要来讲一讲布局方面的知识。
1 CSS 有哪些布局模式？
考虑到网页排版的（早期）需求，CSS2 规范中描述了 “视觉格式化模型” 。在这个模型中，文档树上的每个元素都基于 “盒子模型” 生成了 0 个或多个盒子，而这些盒子依据如下内容排版：
- 盒子的维度属性（dimensions，也就是宽高边距这些）和类型（type，由 display 属性决定）
- 位置约束（正常流、浮动、绝对定位）
- 文档树中元素的关系（后代、子代、sibling、preceding）
- 外部信息（比如 viewport size，图片维度等）
其实理论上这一套东西也够用了，只是想要达到某些效果需要使用各种复杂