文档布局中，常常用到浮动与定位。
一、浮动
浮动使块级元素从正常文档流中删除，向左或向右浮动。但是其他元素会环绕该元素，因此仍然会影响布局。浮动元 素相对与包含块的内边界（内容区）进行浮动。
浮动可以用于使块级元素排成一列，也可以形成两列或三列布局。
注意问题：浮动元素时，可能会出现父元素容器塌陷的问题。也就是说，当容器内的全部元素浮动（会导致父容器高 度为零）或者内部不浮动的元素不足以撑起父容器时，父容器高度会为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.该代码并不能正确显示该效果。