zoukankan      html  css  js  c++  java
  • 关于CSS清理浮动的方法

    清理浮动有很多种方法,如果考虑到兼容性问题和语义化问题,一般可以使用如下代码来清理浮动:

    .clearfix:after {
        visibility:hidden;
        display:block;
        font-size:0;
        content:" ";
        clear:both;
        height:0;
    }
    .clearfix {
        zoom:1;
    }
    其原理是,在“高级”浏览器中使用:after伪类在浮动块后面加上一个非display:none不可见块状内容并给它设置clear:both来清理浮动。在IE6和7中给浮动块添加haslayout来让浮动块撑高并正常影响文档流。
    上面的代码是现在主流的清理浮动的方式。另外,Nicolas Gallagher又给出了一个更简洁的方案:
    .cf:before, .cf:after {
        content:"";
        display:table;
    }
    .cf:after {
        clear:both;
    }
    .cf {
        zoom:1;
    }
    原理还是一样的。使用:after伪类来提供浮动块后的clear:both。不同的是,隐藏这个空白使用的是display: table。而不是设置 visibility:hidden;height:0;font-size:0; 这样的hack。
    值得注意的是这里的 :before 伪类。其实它是来用处理 top-margin 边折叠的,跟清理浮动没有多大的关系。但因为浮动会创建 block formatting context(BFC),这样浮动元素上的另一元素上如果刚好有 margin-bottom 而这个浮动元素刚好有margin-top 的话,应该让他们不折叠(虽然这种情况并不常见)。

  • 相关阅读:
    systemtap没找到函数变量
    systemtap get var of the tracepoing
    如何在tracepoint上注册函数
    stap中的entry函数
    stap用法
    在submit_bio处使用stapn
    巴达努斯
    perf事件的切换
    perf原理再看
    内存回收的阈值
  • 原文地址:https://www.cnblogs.com/cangmang/p/rrucelee.html
Copyright © 2011-2022 走看看