依據(jù)<a target=_blank href="http://blog.csdn.net/goodshot/article/details/44348525">http://blog.csdn.net/goodshot/article/details/44348525</a>我的測試 ? <p>一、</p> <p>1.Container div is overflow is not seted ,float element is not be envoloped <br><br>2.And the postion is seted "static" which means it is not affluncented by the css top and left ect.<br><br>3.According to this example,we can see the "float" css attribute is only set the element in the 0 z-index layer. </p> <div style="background-color:#CCC;;" ><div style="width:100px;height:100px; background-color:blue; "></div><div style="width:100px;height:100px; background-color:olive; float:left; margin-left:30px"></div> </div>

?

?

二、<br> <br> 1.Container div is overflow seted ,float element is be envoloped <div style="background-color:#CCC;; overflow:auto" ><div style="width:100px;height:100px; background-color:olive; float:left; margin-left:30px; margin-top:20px">2.this is means masked.in the 0 z-index layer.</div><div style="width:100px;height:100px; background-color:blue; ">2. The static position is the default postion option,then this blue div is not affected by the "top" "left" ect. attributes ,the we can see it is located in the initial position. </div></div>

以下的截圖是在FF中的

三、use "box-set"( always named "clearfix" in chinese "萬能閉合") <br> <br><div style="background-color:#696;overflow:auto; " class="box-set" ><div style="width:100px;height:100px;background-color:#0FF; float:left; margin-top:100px; margin-left:1000px;"> </div> <br> <br>

四、parent div used css class "box-set" or "overflow:auto" can't affect the div in it. position method float doesn't work in this way .Only margin-left or margin-top can locate the div in float way. <div style="background-color:#696;overflow:auto; " class="box-set"> <div style="position:absolute; left:200px ; top:120px ; width:100px ; height:100px; background-color:#69F"></div> <div style="position:float; left:200px ; top:200px ; width:100px ; height:100px; background-color:#69F"></div> </div>

本文轉(zhuǎn)自mfrbuaa博客園博客，原文鏈接：http://www.cnblogs.com/mfrbuaa/p/5257977.html，如需轉(zhuǎn)載請自行聯(lián)系原作者

總結(jié)

以上是生活随笔為你收集整理的float position的測试案例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。