网页布局基础（float and position）--问答

http://www.w3cplus.com/css/advanced-html-css-lesson2-detailed-css-positioning.html

2-4 一列布局

在包裹层设置margin属性为auto时，不能同时设置float and position，否则auto失效。
定宽+margin：auto = 自动居中

3-1浮动布局

网页布局基础3-1 float属性.jpg

当div设置float:left时div盒子会向左贴近容器（或者父级盒子）同级别的div若没有设置float则被挤开。呵呵
注意：同级别的随后的元素的位置，会受到上一个元素的float影响，此时就要对受影响的元素设置清除浮动的。
第一种. clear：poth;(left and righ)
第二种. widh:100%（或者固定宽度）; overflow:hidden
注：对于文本清除float可以加入br元素，此方法不建议使用。

网页布局基础3-2 清楚浮动两种方法.jpg

3-3 横向两列布局

我学到的东西
当设计页面布局是，发现改变一个元素，页面乱了，瞬间“头大”。这是不要急，找到改变了什么造成何种结果，一一解决！！！（本节真是受益匪浅啊！）

clear:poth;适用于紧跟其后的元素，像父级这种受到float影响要用overflow：hidden。

clear适用环境.jpg

4-1 position

position属性.jpg

4-2 相对定位

position属性相对定位的特点.jpg

给其一个偏移量，red的盒子移动，宽度不变，把网页撑开了也说明其还在标准文档流中。

盒子位移属性是如何工作？
盒子的位移属性有四个“top、right、bottom和left”，用来指定元素的定位位置和方向。这些属性只能在元素的“position”属性设置了“relative、absolute和fixed”属性值，才生效。

对于相对定位元素，这些属性的设置让元素从默认位置移动。例如，top设置一个值“20px”在一个相对定位的元素上，这个元素会在原来位置向下移动“20px”。反之，“top”设置一个“-20px”，这个元素会在原来的位置向上移动“20px”。
对于绝对定位和固定定位鲜红，这些属性指定了元素与父元素边缘之间的距离，例如，绝对定位的元素设置一个“top”值为“20px”，将使绝对定位元素相对于其设置了相对定位的祖先元素顶部边缘向下移动“20px”，反之，如果设置一个“top”值为“20px”，将使绝对定位元素相对于其设置了相对定位的祖先元素顶部边缘向上移动“20px”。（绝对定位的参考点是其祖先元素设置了“relative”或者“absolute”值）。