float position的测试案例

标签：

根据<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>

float position的测试案例

标签：

原文地址：http://blog.csdn.net/goodshot/article/details/44408245