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

  • 相关阅读:
    JQuery文档插件
    MVC3下使用Jquery异步提交数据!
    不错的在线客服插件~
    让火狐和chorme浏览器支持uploadify带Cookie上传
    Socket服务器代码
    Winform控件加载时闪烁的解决方案!
    MVC3 无刷新验证码
    网络时间同步
    关于多线程委托的控件操作
    c# 利用反射动态给实体类对象赋值
  • 原文地址:https://www.cnblogs.com/Zoe-only/p/4619453.html
Copyright © 2011-2022 走看看