网页布局基础（float and position）--问答
http://www.w3cplus.com/css/advanced-html-css-lesson2-detailed-css-positioning.html
在包裹层设置margin属性为auto时，不能同时设置float and position，否则auto失效。
定宽+margin：auto = 自动居中
当div设置float:left时div盒子会向左贴近容器（或者父级盒子）同级别的div若没有设置float则被挤开。呵呵
注意：同级别的随后的元素的位置，会受到上一个元素的float影响，此时就要对受影响的元素设置清除浮动的。
第一种. clear：poth;(left and righ)
第二种. widh:100%（或者固定宽度）; overflow:hidden
注：对于文本清除float可以加入br元素，此方法不建议使用。
我学到的东西
当设计页面布局是，发现改变一个元素，页面乱了，瞬间“头大”。这是不要急，找到改变了什么造成何种结果，一一解决！！！（本节真是受益匪浅啊！）
给其一个偏移量，red的盒子移动，宽度不变，把网页撑开了也说明其还在标准文档流中。
对于相对定位元素，这些属性的设置让元素从默认位置移动。例如，top设置一个值“20px”在一个相对定位的元素上，这个元素会在原来位置向下移动“20px”。反之，“top”设置一个“-20px”，这个元素会在原来的位置向上移动“20px”。
对于绝对定位和固定定位鲜红，这些属性指定了元素与父元素边缘之间的距离，例如，绝对定位的元素设置一个“top”值为“20px”，将使绝对定位元素相对于其设置了相对定位的祖先元素顶部边缘向下移动“20px”，反之，如果设置一个“top”值为“20px”，将使绝对定位元素相对于其设置了相对定位的祖先元素顶部边缘向上移动“20px”。（绝对定位的参考点是其祖先元素设置了“relative”或者“absolute”值）。
Why 一般会把父包含块设置position：relative。因为relative还在标准文档流中，相对稳定。若设置absolute也可但此时本身已经脱离标准文档流。
当把一个块级元素设置position：absolute，并且没有设置宽度时，此时元素的宽度会根据内容进行调节
