5.CSS定位与浮动

概要

1、文档流

什么是文档流（标准流）

文档流是文档中可显示对象在排列时所占用的位置/空间。
例如：块元素自上而下摆放，内联元素，从左到右摆放。
标准流里面的限制非常多，导致很多页面效果无法实现。

1. 高矮不齐，底边对齐、
2. 空白折叠现象
   1. 无论多少个空格、换行、tab，都会折叠为一个空格
   2. 如果我们想让img标签之间没有空隙，必须紧密连接

如果我们现在就要并排顶部对齐，那该怎么办呢？办法是：移民！脱离标准流！

脱离文档流

使一个元素脱离文档流有三种方式：

1. 浮动
2. 绝对定位
3. 固定定位

   2、浮动

   什么是浮动

   浮动可以让元素脱离文档流，向左或向右摆放

浮动特性：

1. 可以设置大小
2. 可以产生压盖现象
3. 浮动的元素互相贴靠，无空隙
4. css的float属性可以使一个元素脱离正常的文档流，然后被安放到他所在的容器的左端或者右端，并且其他的文本和内行元素环绕他。

浮动也会产生副作用，那么如果去掉清除掉浮动的副作用呢？

清除浮动

当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动，他会影响到后面的元素的位置。所以，为了不影响，我们可以清除浮动

/*给父元素标签清除浮动*/
.parent{
  clear:both;
  overflow:hidden;
}

3、定位

position属性指定了元素的定位类型。

其中，绝对定位和固定定位会脱离文档流。
设置定位之后：可以使用四个方向值进行调整位置：left、right、top、bottom

注意：设置定位之后，他是相对于具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，知道顶层文档。

绝对定位和固定定位的区别：固定定位永远都是相对于浏览器窗口进行定位，会固定在浏览器窗口的某个位置，不会随着滚动条滚动，IE6不支持固定定位。

4、z-index

z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素前面。
z-index取值一般是1~999。

5、display

display可以修改元素的类型，让块级元素和内联元素相互转换