浮动
- 图文混排,实现文字环绕图片的效果(最原始应用)
- 浮动作为一种布局技巧被使用(当时没有弹性布局)
- 单独把一块内容拉到右侧或左侧(补充流式布局局限)
- 把一堆原来是垂直排列的标签改成横向排列
浮动的副作用
- 影响后续标签的排列(会导致内容排在浮动标签的后方,本意是排到下方)
- 解决的方法:清除浮动(加一个空div,设置它的样式clear:both;)
相对定位
- 相对标签自身的原始位偏移,通常用在微调标签位置
- 不会影响周边的标签!
- 一旦开启定位,就可以使用z-index控制层次,层数越大越靠上
- z-index对于相对定位、绝对定位、固定定位的表现是一致的。
绝对定位
- 相对于参照物来定位。
- 参照物是离定位标签最近的【开启定位的】上级标签,如果找不到,则根标签就是参照物。
- 一旦开启绝对定位,标签就会把空间让出来,其他标签就会填补它的标签位置,绝对定位就会影响其它标签。