float position的测试案例

最新推荐文章于 2025-07-17 16:48:46 发布

原创最新推荐文章于 2025-07-17 16:48:46 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

web页面设计同时被 2 个专栏收录

80 篇文章

订阅专栏

css

11 篇文章

订阅专栏

本文详细探讨了CSS中浮动(float)属性的使用方法及其与其他布局属性的交互作用，特别是与容器溢出(overflow)的关系。通过实例展示了如何利用clearfix技巧解决浮动元素导致的布局问题，并对比了不同类型的定位方式。

根据<a target=_blank href="http://blog.youkuaiyun.com/goodshot/article/details/44348525">http://blog.youkuaiyun.com/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>