CSS05：浮动和定位
浮动
display
块元素默认独占一行，有高度和宽度；而行内元素没有高度和宽度，不能独占一行
display属性可以转换元素类型，是实现行内元素排列的一种方式，但是方向不可控，更多是使用float
我的网页
div元素
span行内元素
float和clear
float属性可以让块元素浮动起来，在一行显示多个div元素，但是浮动起来的元素会随其他浮动改变位置，会造成父级边框塌陷
clear属性可以让浮动的左右不存在其他浮动，互不干扰
我的网页
浮动与定位
父级边框塌陷
父级元素不设置高度时，随内容增加自适应高度。当父级元素内部的子元素全部都设置浮动float之后，子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，高度降为0，即产生边框塌陷
四种解决方法：增加父级元素高度、添加一个空的div标签、父级元素添加属性overflow: hidden、添加父级伪类:after
我的网页
浮动与定位
定位
相对定位
position: relative，基于原来的位置进行偏移（仍然在标准流中，原来的位置会被保留）
top、bottom、left、right，值为正数时表示远离对应方向的距离
我的网页
绝对定位
position: absolute，有两种情况：（脱离标准流，原来的位置不会被保留）
1、如果父级元素没有定位，则相对于浏览器偏移
2、否则相对于父级定位偏移
我的网页
固定定位
position: fixed，基于浏览器固定位置
我的网页
z-index
z-index 属性是用来调整元素及子元素在 z 轴图层上的顺序，值越大越上层
前提：元素必须有定位才能使用z-index
我的网页
枫原万叶