关于HTML页面的布局(float与position)

关于浮动float的用法

元素开了浮动会带来以下效果

1. 元素会脱离原来的文档流，不再占据原页面的位置，后面的元素进行补位，可以把页面看作楼层，大家原本都在一楼，加了浮动就相当于上了二楼，形如下图：
   未加浮动
   
   对div1加上左浮动
   
   可以看到黄色的div2占据了原来div1的位置，而文字"子元素div2"被挤了下来，div2对div1进行补位操作。
2. 浮动元素会停留在父元素的左右两边，例如以上的例子，加了左浮动的div2还是会靠在父元素(灰色框)的左上角，如果是右浮动就是靠在父元素的右边了；浮动元素也会停留在其他浮动元素边缘，例如下图，再给div1加上左浮动，形如：
   
   这样两个div都有左浮动，div2会停留在div1的旁边。
3. 浮动可以满足在一行中放置多个块级元素的要求，比如说一个div内需要放置多个元素，例如表格和其他的div元素，形如下图：
   
   针对这种情况，可以对左边的"我的京东"和右边的表格同时做左浮动的操作。

以下实例：我们只需要div3添加右浮动的操作，再用margin具体调整位置即可；再看div2中的三个小板块(一个板块对应一本书与相应文字)，可以同时对三个板块添加左浮动。浮动一般可用于大板块的定位，或是板块内多个div的横向排列。

关于定位position的用法

首先要谈到position的四大属性：
static（默认）
relative（相对定位）
absolute（绝对定位）
fixed（固定定位）

static：position设为static并不会脱离原文档流，反而可以取消原本设置的定位，可以理解为有5个div，全都加了相对定位，但其中一个div并不需要相对定位，就可对该div单独设置static。

relative： 元素添加了相对定位不会脱离原文档流，原来是什么样还是什么样，与绝对定位配合使用，因为加了绝对定位的元素会相对已经定位的父元素去定位，如果父元素都没有定位，则子元素相对body定位，所以为父元素加上相对定位，子元素加上绝对定位，实例在下文会提到。

absolute：绝对定位会使元素脱离原文档流，相对最近的已定位父元素调整位置，形如：
这个Best1图片就是通过绝对定位实现的

没有对Best1加上绝对定位时：

给Best1加上绝对定位与距离top、left信息后：

#book #node1 {
				position: absolute;
				top: 100px;
				left: 20px;
			}

单独使用相对定位进行元素的微调，相对定位与绝对定位配合起来可以进行父元素内小元素小板块的定位，使用起来都很方便。

fixed：固定定位可将元素一直固定在页面中的某个可视位置，位置不随用户下滑操作而改变，就像页面广告一样，当然也脱离原文档流，形如：

fixed代码：

#buttom{
				position: fixed;
				margin: 200px 100px;
			}