zoukankan      html  css  js  c++  java
  • 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="100px;height:100px; background-color:blue;  "></div>
    
     <div style="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="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="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="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 ;  100px ; height:100px; background-color:#69F"></div>
    <div style="position:float; left:200px ; top:200px ;  100px ; height:100px; background-color:#69F"></div>
    </div>


  • 相关阅读:
    dotnet 读 WPF 源代码笔记 了解 WPF 已知问题 用户设备上不存在 Arial 字体将导致应用闪退
    WPF 基础 2D 图形学知识 判断点是否在线段上
    WPF 实现自定义的笔迹橡皮擦
    WPF 加载诡异的字体无法布局
    dotnet 5 从 IL 层面分析协变返回类型新特性
    WPF 笔迹触摸点收集工具
    dotnet C# 序列化 XML 时进行自动格式化
    自定义systemctl服务
    maven之三大特性属性、profile、资源过滤
    dependencyManagement与dependencies
  • 原文地址:https://www.cnblogs.com/mfrbuaa/p/5257977.html
Copyright © 2011-2022 走看看