CSS布局模型
- 流动模型（Flow）
- 浮动模型 (Float)
- 层模型（Layer）
流动模型
默认的网页布局模型，块级元素自上而下分布，宽度为100%，独占一行；内联元素从左到右水平分布，内容宽高决定元素的宽高。
浮动模型 (包裹性)浮动模型具有包裹性，我把包裹性比喻为让元素display：inline-block，我们默认情况下的div是独占一行，宽度以100%显示的，而一旦给这个div添加了float属性，则100%的默认宽度会变成自适应的内部元素宽度（前提是你未给元素设置宽高），比如把上述的div添加float属性之后：
块级元素div的宽度完全由内容的宽高决定，且周围的元素替补之前的空间，所有浮起的元素“半脱离文档流”，在同一层按照顺序继续排列并不会重叠，浮动元素依旧会占据位置且浮动元素会相互看到，它处于文档流的上方所以影响周围的元素，所以也不是真正意义上的脱离文档流。使用了浮动又不想相互影响，有清除浮动可解，顾名思义就是清除flot属性所带来的一系列问题，清除浮动属性后解决了无法自动改变高度的问题，也不影响周围元素的排列布局。
当我们要使用块级元素又不想它独占一行的时候，这个时候设置浮动就可以解决这个问题。任何元素在默认情况下是不能浮动的，通过CSS定义浮动即可。
层模型 (包裹性)
层布局模型就像是PhotoShop中的图层编辑功能，每个图层能够精确定位操作，我们可以借助z-index属性来*的调整层级关系。CSS 定义了一组定位（position）属性来支持层布局模型。
- 绝对定位（position: absolute）
- 相对定位（position: relative）
- 固定定位（position: fixed）
- 继承（position: inherit）
- 静态定位（position: static）
（1） 绝对定位
支持z-index属性，元素从文档流中脱离出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的上级元素进行绝对定位。如果不存在这样的上级元素，则相对于body元素，绝对电定位的元素和浮动元素类似，具有包裹性，如需自适应上级元素，还需手动设置。比如：
颜色块的宽度由内容宽决定且脱离文档流位于上方，如需颜色块宽度自适应，添加width:100%。
（2） 相对定位
支持z-index属性，相对元素原来的位置进行移动，移动的方向和幅度由left、right、top、bottom属性确定，元素脱离正常的文本流中，但元素本身所占的位置会保留，不影响其他元素的布局、位置。
（3） 固定定位
支持z-index属性，绝对定位的一种特例。但它的相对移动的坐标是body（屏幕内的网页窗口）本身。由于窗口是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。
（4） 继承
规定应该从父元素继承 position 属性的值。
（5） 静态定位
不支持z-index属性，元素的默认值，没有定位，元素出现在正常的文档流中，设置的top, bottom, left, right 属性无效。