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

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

float position的測试案例相关推荐

  1. jsfiddle在线測试Html、CSS、JavaScript——http://jsfiddle.net/

    jsfiddle在线測试Html.CSS.JavaScript,并展示測试结果 1.选择jQuery1.9.1 2.选择jQuery UI 1.9.2 3.Html <ul id="n ...

  2. Cocos2d-x 3.2 Lua演示样例FontTest(字体測试)

    Cocos2d-x 3.2 Lua演示样例FontTest(字体測试) 本篇博客介绍Cocos2d-x 3.2中Lua測试项目中的FontTest样例,主要使用了字体文件来创建我们想要的字体样式: 第 ...

  3. SWTBOK測试实践系列(1) -- 測试在项眼下期的评审投入划算吗?

    測试策略:静态測试还是动态測试? [对话场景] 成功公布某个软件版本号之后,项目团队召开了项目的经验教训总结大会.在会议期间,项目经理小项和測试经理小測进行了例如以下的对话: 小项:"小測, ...

  4. MySQL 使用自增ID主键和UUID 作为主键的优劣比較具体过程(从百万到千万表记录測试)...

    測试缘由 一个开发同事做了一个框架.里面主键是uuid.我跟他建议说mysql不要用uuid用自增主键,自增主键效率高,他说不一定高,我说innodb的索引特性导致了自增id做主键是效率最好的,为了拿 ...

  5. 用python做自己主动化測试--绘制系统性能趋势图和科学计算

    在性能測试中.我们常常须要画出CPU memory 或者IO的趋势图. 预计大学里.大多数人都学习过matlib, 领略了matlib绘图的强大. python提供了强大的绘图模块matplotlib ...

  6. 沧海一声笑,移动应用的CRASH原因我找到! --记最新款数字化測试“星云測试“的使用攻略...

    沧海一声笑,移动应用的CRASH原因我找到! --记最新款数字化測试"星云測试"的使用攻略 世界进步那么快,非常多新奇的点子层出不穷,于是我们创业.我们做最酷的手机应用,做最轰炸的 ...

  7. 第4代白盒測试方法介绍--理论篇

    关键词: 白盒測试 第4代 測试方法 4GWM 在线測试 持续測试 灰盒 脚本驱动 脚本桩 摘  要: 本文是第4代白盒測试方法的理论介绍,描写叙述3个关键领域内9项关键特征的概念与固有特征.同一时候 ...

  8. 最大概率法分词及性能測试

    最大概率分词是一种最主要的统计方法分词. 一个待切割的字符串有多种分词结果,最大概率分词的原则是将当中概率最大的那个作为该字符串的分词结果. 第一部分 理论基础 如对一个字符串: S:有意见分歧 分词 ...

  9. (4.5.4)Android測试TestCase单元(Unit test)測试和instrumentationCase单元測试

    Android单元和instrumentation单元測试 Developing Android unit and instrumentation tests Android的单元測试是基于JUnit ...

最新文章

  1. 基于深度学习和传统算法的人体姿态估计,技术细节都讲清楚了
  2. R语言使用caret包对GBM模型自定义参数调优:自定义参数优化网格
  3. MySQL中的配置参数interactive_timeout和wait_timeout
  4. AD 域服务简介(二)- Java 获取 AD 域用户
  5. 百度安全 Rust TrustZone SDK正式成为 Apache Teaclave 子项目
  6. win10远程桌面连接ubuntu18.04
  7. 清除防火墙所有配置规则
  8. python白森_氧气恋人小说-江白森修辞在线阅读-829阅读网
  9. 浅谈ASP.NET的内部机制(二)
  10. LA 3882 And Then There Was One
  11. php更改html内容,请问你们怎么将html的文件的内容改变为php
  12. 模仿豆丁、百度文库播放器
  13. 极简代码(四)—— 分段函数(sinc)的实现
  14. DotNetTextBox V3.0 所见即所得编辑器控件Ver3.2.5 Free(免费版)
  15. C/C++(变量作用域)
  16. 在线qmc0转换mp3工具_音乐格式转换
  17. 百度网盘机器人软件工具自动发货管理文件好友群补发文件资料 (可用于拼多多淘宝闲鱼虚拟店商品自动发货)
  18. Dynamic resolution 动态分辨率 相机系列6
  19. TJUPT 无法与服务器建立连接问题的解决方法
  20. 太秀了!程序媛小姐姐写出代码版《本草纲目》,刘畊宏回复:很cool!

热门文章

  1. 计算机组成原理实验八报告,计算机组成原理实验八报告
  2. npm run build 打包 之后怎么用_npm 组件你应该知道的事
  3. ajax代码编程题,关于AJAX管家代码的几个基本问​​题
  4. oracle 自治数据库 培训,Oracle数据库掌门人,Andrew Mendelsohn 谈自治数据库
  5. 图像化转向名词解释_遥感——数字图像处理名词解释及简单整理
  6. 对linux做一个简单介绍,对“Fork”做一个技术方面的简介
  7. 我的世界连锁挖矿下载JAVA_我的世界1.7.10连锁挖矿整合包
  8. .net 获取字符串中的第一个逗号的位置_SQLZOO中做错过的题
  9. 学车比学计算机简单,帅哥自述:学车比上班还要累
  10. html性别选项卡,html选项卡