在HTML中，有三种机制：文档流（默认） 浮动 定位。

文档流：默认机制，按照从上到下，从左到右的顺序排列，这是最基础的。

浮动：float:left|right;clear:both  ，脱离文档流，可以想象成子DIV 漂浮起来了，比如，一个父div，有两个子div，如果是在文档流中，两个子div是将父div分成上下两部分的，就像是“日”字；但是如果子div1 设置了float属性，那么子div2 就会往上移动，就会变成三个“口”字重叠在一起，最下面的那个口是父div，上一层是子div2，最上面是子div1 。

定位：position:absolute| relative|fixed  .

其中，absolute是绝对定位，脱离了文档流。根据设置了定位属性的父元素的左上角为基点，通过top right  bottom left来定位。如果父元素没有设置定位属性，那么以body的左上角为基点。比如三个div，id=one是父元素，两个子元素的id分别是two three  。设置one的position属性（absolute relative都可），设置two的position：absolute；left:10px; top:10px; three不设置position属性。那么情形和上面的float的三个“口”字重叠一样，底层是one，次一层是three，最上面是two，但是最上面的会向右和向下移动10px。

relative是相对定位，没有脱离文档流，不可叠加。还是上面的例子，三个div ，one two three。如果之设置two的position：relative；left:10px;top:10px;  那么结果就会是这样的：想象一个“日”字，上面的是two，下面的是three。虽然two向右 向下移动了10px，但是three依然不会占上去，依然在文档流中的原来位置。