css浮动与定位

在文档的整体布局中，我们常常会使用浮动与定位。

一、浮动

       浮动从正常流中删除，向左或向右浮动。因为其他元素绕着浮动元素排列，因此还是会影响文档的布局。浮动元素是相对于父级元素的内边界定位的。浮动非替换元素时，需要指定其宽度。

       浮动元素常常用来使块级元素排成一排。或者形成两列或三列布局。

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

解决方法：1.为父元素指定高度

                  2.将父元素的hidden设为auto、或者hidden。

                 3.将父元素浮动。

二、定位

   position的值为static、relative、absolute、fixed

     1.static：正常流中的位置

     2.relative：相对于正常流中的位置定位。原来的位置保留

    3.absolute：相对于包含块定位，原来的位置从正常文档流中完全删除。包含块为最近的position值不是static的祖先 元素

   4.fixed：相对于浏览器窗口。

   分三种情况;

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

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

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

三、例子

要实现如下效果：

左边效果实现;

右边的效果实现：

1.相对于header定位：

2.相对于父元素定位

3.下面代码并不能实现效果。