CSS允许任何元素浮动float，不论是图像，段落还是列表。无论先前元素是什么状态，浮动后都成为块级元素。浮动元素的宽度缺省为auto。
浮动有一系列控制它的规则。
1.浮动元素的外边缘不会超过其父元素的内边缘。
2.浮动元素不会互相重叠。
3.浮动元素不会上下浮动。
4.如果一个浮动元素在另一个浮动元素之后显示，而且会超出容纳块，则它下降到低于先前任何浮动元素的位置。说简单点就是没有空间的话，就另起一行。
下面是一个例子：
<div id="main">
<div id="box1">box1</div>
<div id="box2">box2</div>
<div class="clear"></div>
</div>
#main{ width:100%; }
#box1{ float:left; width:40%;}
#box2{ float:right; width:60%;}
.clear{ clear:both;}
这是一个一行两列的例子，其中clear的作用是不让浮动元素下面的元素环绕在它周围。
定位
position，我们通常用到的是绝对(absolute)和相对(relative)定位，运用这些定义，同样可以进行布局，做出上面一行两列的例子。
<div id="main">
<div id="box1">box1</div>
<div id="box2">box2</div>
</div>
#main{ position:relative;width:100%;}
#box1{ position:absolute; top:0; left:0; width:40%;}
#box2{position:absolute; top:0; right:0; width:60%;}
通常，做弹出菜单的时候，我会用到定位，父元素相对定位position:relative，其中的子元素绝对定位position:absolute，通过top，right，bottom，left的值来控制子元素的位置，要注意的是子元素的位置将相对于父元素，而不是整个页面。
浮动与定位的区别
通过定位虽然也可以进行布局，但是它的特点决定了它不适合做页面的布局，因为被定义的元素在普通文档中占有的任何空间都将被关闭，可以说，它是漂浮在整个页面上面的，所以，它可以和页面上其他的内容重叠显示。
这个特点可以方便的让我们做出其他特殊的效果，但是相对与浮动就布局来说，我们更多的还是用浮动。
position:
在DW中文版中翻译为“定位”，常用的属性有relative（相对）与 absolute（绝对）。
有很多朋友对这条指令的用法还是不清楚，这里做一定细致的讲解：position：relative； 表示相对定位，被定位了这个属性的标签在所属的范围内可以进行上下左右的移，这里的移动与padding或是margin所产生的位置变化是不一样的。padding与margin是元素本身的一种边距与填充距离并不是真正的移动，而被定义为relative的元素是真正的移动，这所产生的移动距离是从margin的外围到父级标签内侧之间这一段。
position：absolute； 表示绝对定位，如果定义了这个属性的元素，其位置将依据浏览器左上角的0点开始计算，并且是浮动正常元素之上的。那么当你需要某个元素定位在浏览器内容区的某个地方就可以用到这个属性。
那么有个问题产生了，现在大家做的网页大部分是居中的，那么我需要这个元素跟着网页中的某个元素位置不论分辨率是多少他的位置始终是针对页内的某个元素的，那么单纯的absolute是不行的。
正确的解决方法就是在元素的父级元素定义为position：relative；（更正：这里可以是祖父级，也可以是position：absolute；，多谢谢old9的提出）需要绝对定位的元素设为position：absolute；这样再设定top，right，bottom，left的值就可以了，这样其定位的参照标准就是父级的左上角padding的左上侧
Absolute，CSS中的写法是：position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。Relative，CSS中的写法是：position:relative; 他的意思是相对定位，他是参照父级的原始点为原始点，无父级则以文本流的顺序在上一个元素的底部为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。
理解 position:relative 与 position:absolute:
position 有三个值，static（静态）、relative（相对）、absolute（绝对）；由于static是所有页面元素的默认值，因此设置元素的定位类型时几乎不用这个值，除非用于覆盖之前的定义。
对于后两者，一般应用：在一个相对定位的元素里面放置一个绝对定位的元素，如图：
子元素B可以通过top、right、bottom、left来精确定位，定位的参考目标就是其具有相对定位属性的父级元素A；并且设置这些偏移后，产生的空隙会被后面的元素填充（如果后面的元素足够尺寸的话）。由于B元素具有absolute定位属性，相当于从文档流中抽取出来，浮动在原平面排版上，形成“层”，如果有多个“层”，层与层之间就必然会有谁覆盖谁，谁在上谁在下的竞争关系，因此，为解决这个竞争，就产生了 z-index（空间坐标系的Z轴） 属性，谁的值大，谁就在上面。另外，如果父级元素A没有设置relative，那么B元素就会以body标签当作参考点。
对于具有position:relative属性的元素A，其top、right、bottom、left四个方向的位置偏移就会以该元素的原来位置作为参考点，而不是像上面说的，以具有relative定位属性的父级元素或body作为参考点。在设置了偏移后产生了空隙，其周围的元素并不会填充这些空隙，即使它们足够尺寸(
演示)。值得注意的是，此时元素A的margin，margin将作用于该元素的原来位置，由于原位置产生偏移，该元素的最终位置将是margin与top、right、bottom、left共同作用后的位置，并且其周围元素的位置也将产生影响。
回过头来再看看 relative 里面的 absolute，比如上面的A、B两个元素，如果两个元素都设置了top、right、bottom、left，对于元素B来说，其位置偏移的参考点是元素A偏移后的位置，不是元素A的原位置，同样，如果元素B有margin，其参考点也是元素A偏移后的位置，这点很重要，这才是absolute的概念(
演示)。
