在div排版中，经常需要将div内的多个div对齐，或在同一行，由于div是一个块，独占一行，采用float使div在同一行时，若非float的元素和float的元素在一起，如果非float元素在先，那么float的元素将被排斥 。假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
absolute定位：相对于position为非static的父元素进行定位，如果父元素有定义position为非static则定位的位置（right，left等）跟设置为relative无区别。
relative定位：区别与absolute定位，相对于最近的父元素定位，无需父元素的position要求，未脱离文本流，占据了位置空间。
<body>
<div style="width:500px;position:absolute;left:0px;top:0px;border:1px solid red;height:100px" > <div id="px1" style="position:absolute; left:0px;height:100px; width:150px; background-color:green;"></div> <div id="px2" style=" height:100px;margin-left:150px;margin-right:150px;background-color:red;"></div> <div id="px3" style="position:absolute;top:0px;right:0px;height:100px; width:150px; background-color:gray;"></div> </div>
</body>
如上述代码，外框div的位置，跟body的position有关，若设置body的position非static则div的absolute与relative位置不变。否则absolute相对于浏览器定位，而relative相对于div在body中的位置定位。
absolute与float均脱离文档流。会覆盖文档流。absolute下如果使用margin则不一定起作用。float下可以使用margin
<div style="width:500px;position:fixed;left:200px;top:100px;border:1px solid red;height:100px" > <div id="px1" style="float:left;margin-left:100px;height:100px; width:150px; background-color:green;"></div> <div id="px2" style=" height:100px;background-color:red;"></div> </div>
<div style="width:500px;position:fixed;left:200px;top:100px;border:1px solid red;height:100px" > <div id="px1" style="margin-left:100px;height:100px; width:150px; background-color:green;"></div> <div id="px2" style="float:left; height:100px;width:200px;background-color:red;"></div> </div>
上例中div元素px2的上一相邻元素px1如果非float,则px2会换行显示，若px2元素没设置width则width变为0；
absolute与文本不在同一空间，会覆盖111，而float会覆盖占用文本空间，不会覆盖文本111见下：
<div style="width:500px;position:fixed;left:200px;top:100px;border:1px solid red;height:100px" > <div id="px1" style="position:absolute;left:0px;height:100px; width:150px; background-color:green;"></div> 111 </div>
浙公网安备 33010602011771号