float position的測试案例

最新推荐文章于 2025-07-31 15:49:11 发布

转载最新推荐文章于 2025-07-31 15:49:11 发布 · 47 阅读

本文通过实例解析了浮动元素如何与容器布局相互作用，重点讨论了不同情况下浮动元素的位置变化及其对布局的影响。从基本原理到高级应用，包括使用`clearfix`技巧解决浮动塌陷问题，以及在不同容器设置下浮动元素的行为变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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