position

position 这个属性决定了元素将如何定位。它的值大概有以下五种：

具体效果可以参考w3school的实例，或者自己写一下就明白了。

每个网页都可以看成是由一层一层页面堆叠起来的。

position 设置为 relative 的时候，元素依然在普通流中，位置是正常位置，你可以通过 left right 等移动元素。会影响其他元素的位置。

而当一个元素的 position 值为 absolute 或 fixed 的时候，会发生三件事：

把该元素往 Z 轴方向移了一层，元素脱离了普通流，所以不再占据原来那层的空间，还会覆盖下层的元素。

该元素将变为块级元素，相当于给该元素设置了 display: block;（给一个内联元素，如 ，设置 absolute 之后发现它可以设置宽高了）。

如果该元素是块级元素，元素的宽度由原来的 width: 100%（占据一行），变为了 auto。

由此观之，当 position 设置为 absolute 或 fixed，就没必要设置 display 为 block 了。

而且如果你不想覆盖下层的元素，可以设置 z-index 值 达到效果。

float

float 顾名思义，就是把元素浮动，它的取值一共有四个：

left right none inherit，光看名字就懂了，无需多言。

最初的 float 只是用来实现文字环绕图片的效果，仅此而已。

而现在 float 的应用已不止这个，前辈们也是写了无数博文来深入浅出的讲解它。 我就不班门弄斧写原理了，只说说 float 的几个要点就行了：

只有左右浮动，没有上下浮动。

元素设置 float 之后，它会脱离普通流（和 position: absolute; 一样），不再占据原来那层的空间，还会覆盖下一层的元素。

浮动不会对该元素的上一个兄弟元素有任何影响。

浮动之后，该元素的下一个兄弟元素会紧贴到该元素之前没有设置 float 的元素之后（很好理解，因为该元素脱离普通流了，或者说不在这一层了，所以它的下一个元素当然要补上它的位置）。

如果该元素的下一个兄弟元素中有内联元素（通常是文字），则会围绕该元素显示，形成类似「文字围绕图片」的效果。 下一个兄弟元素如果也设置了同一方向的 float，则会紧随该元素之后显示。

该元素将变为块级元素，相当于给该元素设置了 display: block;（和position: absolute; 一样）。

清除浮动的几种方法(推荐)

第一种方法：加入一个空的同类元素，然后设置元素css属性

clear:both;

第二种方法：使用overflow属性

此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。

使用该方法是只需在需要清除浮动的元素中定义CSS属性：overflow:auto，即可!

overflow:auto;是让高度自适应，zoom:1;是为了兼容IE6，也可以用height:1%;的方式来解决，注意，zoom不符合W3C标准。

overflow:hidden也可以实现。

{overflow:hidden; zoom:1;}

第三种方法：使用after伪对象清除浮动

after伪对象非IE浏览器支持，所以并不影响到IE/WIN浏览器。具体写法可参照以下示例。使用中需注意以下几点。

一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；

二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值为"."，

.clearfloat{zoom:1;}

.clearfloat:after{

content:".";

display:block;

visibility:hidden;

height:0;clear:both;

}