浮动18.7.21

浮动

1. 图文混排，实现文字环绕图片的效果（最原始应用）
2. 浮动作为一种布局技巧被使用（当时没有弹性布局）
3. 单独把一块内容拉到右侧或左侧（补充流式布局局限）
4. 把一堆原来是垂直排列的标签改成横向排列

浮动的副作用

1. 影响后续标签的排列（会导致内容排在浮动标签的后方，本意是排到下方）
2. 解决的方法：清除浮动（加一个空div，设置它的样式clear:both;）

相对定位

1. 相对标签自身的原始位偏移，通常用在微调标签位置
2. 不会影响周边的标签！
3. 一旦开启定位，就可以使用z-index控制层次，层数越大越靠上
4. z-index对于相对定位、绝对定位、固定定位的表现是一致的。

绝对定位

1. 相对于参照物来定位。
2. 参照物是离定位标签最近的【开启定位的】上级标签，如果找不到，则根标签就是参照物。
3. 一旦开启绝对定位，标签就会把空间让出来，其他标签就会填补它的标签位置，绝对定位就会影响其它标签。