且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

float position的測试案例

更新时间:2022-09-14 22:44:54

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


 

float position的測试案例

 

二、<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中的
float position的測试案例

三、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>

float position的測试案例

四、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的測试案例






本文转自mfrbuaa博客园博客,原文链接:http://www.cnblogs.com/mfrbuaa/p/5257977.html,如需转载请自行联系原作者