css之浮动与定位

文档布局中，常常用到浮动与定位。

一、浮动

   浮动使块级元素从正常文档流中删除，向左或向右浮动。但是其他元素会环绕该元素，因此仍然会影响布局。浮动元 素相对与包含块的内边界（内容区）进行浮动。

   浮动可以用于使块级元素排成一列，也可以形成两列或三列布局。

 注意问题：浮动元素时，可能会出现父元素容器塌陷的问题。也就是说，当容器内的全部元素浮动（会导致父容器高 度为零）或者内部不浮动的元素不足以撑起父容器时，父容器高度会为0或者不足以满足我们对页面布局的要求，与后面的元素会发生重叠。

  对于非替换元素浮动时，通常会指定宽度。

解决方法：1.将父元素的overflow设置为hidden或auto。overflow：hidden/auto

                  2.给父元素设置一个宽度。

                  3.设置父元素浮动（不推荐）

二、定位

        position的值为static（默认）、relative、absolute、fixed。通过top、bottom、left、right改变位置。

        a：static：正常流中的位置。元素框正常生成。

        b ：relative：相对于正常流中的位置进行定位。原来的位置仍保留。

        c：absolute：元素从正常流中完全删除，相对于其包含块进行定位。包含块为最近的position值不是static的祖先 元素

         分为三种情况：

         第一种：若祖先元素是块级元素则包含块为该元素的内边距边界（即边框界定的区域）

         第二种：若祖先元素是行内则包含块为该元素的内容边界

        第三种：若没有祖先元素，则包含块为初始包含块（html元素，有些浏览器会是body元素）。

    d：fixed：相对于窗口定位

三、例子

    实现如下的效果图：

左边的样式的代码：

右边样式的代码：

1.相当于header定位

  2.相对于最近包含块定位

3.该代码并不能正确显示该效果。