zoukankan      html  css  js  c++  java
  • 清除浮动的几种方法

    1 加一个清除浮动的<div>,推荐

    <div class="all">
    <div class="a"></div>
    <div class="b"></div>
    <div class="clear"></div>
    .all
    {
    100%;
    height:auto
    .a{
    float:left;
    }
    .b{
    float:right;
    }
    .clear{
    clear:both;
    }

    2 父元素也写成float:left;。但会影响其他元素的表现

    3 父元素:overflow:hidden;zoom:1;

    4 结合使用:after伪类和内容声明在指定的现有内容的末尾添加新的内容:

    .clear:after {
    
     content:".";
    
     height:0;
    
     visibility:hidden;
    
     display:block;
    
     clear:both;
    
    }
    
    <div class="all clear">

    这个方法在大多数现代浏览器中都是有效的,淘宝首页也用了这种方式来清除浮动,但是在win/IE6和更低版本中不起作用。

    在区分Win和Mac中Internet Explorer的诸多方法中,最常用就是Holly招数。Holly招数的原理是这样的,CSS代码

    1. /* 这段代码只有IE/Win可以看见 */  
    2. CSS 规则  
    3. /* 结束Hack */  

    上面的代码中有两行注释,其中第一行结束时出现了反斜杠(),在Mac的Internet Explorer中会认为注释并没有结束,于是继续向下直到第一个完事的“*/”出现,这中间的所有字符都被当作是注释,而IE/Win却只会把第一行 和第三行看作是注释,中间的为有效代码。所以这样就区分出来了不同平台上的IE了。

    正是基于以上原理,在windows的IE 6上的清理浮动,可以使用如下代码:

    .all{
    display:inline-block;
    }
    /*Holly Hack Begine*/
    *html .all{
    height:1%;
    }
    .all{
    display:block;
    }
    /*end Hack*/

      参考:http://www.cnblogs.com/yuzhongwusan/archive/2008/06/18/1224383.html

  • 相关阅读:
    「日常训练」Single-use Stones (CFR476D2D)
    「日常训练」Greedy Arkady (CFR476D2C)
    「Haskell 学习」二 类型和函数(上)
    「学习记录」《数值分析》第二章计算实习题(Python语言)
    「日常训练」Alena And The Heater (CFR466D2D)
    Dubbo 消费者
    Dubbo 暴露服务
    Rpc
    git fail to push some refs....
    Spring Cloud (6)config 客户端配置 与GitHub通信
  • 原文地址:https://www.cnblogs.com/Zoe-only/p/4619453.html
Copyright © 2011-2022 走看看