• [笔记]使用clearfix清除浮动


    转载自奶牛博客

    .clearfix { 
      *zoom: 1; 
    } 
    
    .clearfix:before, .clearfix:after { 
      display: table; 
      line-height: 0; 
      content: ""; 
    } 
    
    .clearfix:after { 
      clear: both; 
    } 
    

      

    在一个有float 属性元素的外层增加一个拥有clearfix属性的div包裹,可以保证外部div的height,即清除"浮动元素脱离了文档流,包围图片和文本的 div 不占据空间"的问题。

    看到”闲聊CSS之关于clearfix–清除浮动“ (http://www.indievox.com/e2ghost/post/50238)的文章给了一个比较清晰的分析:

    构成Block Formatting Context的方法有下面几种: 
    
        float的值不为none。 
    
        overflow的值不为visible。 
    
        display的值为table-cell, table-caption, inline-block中的任何一个。 
    
        position的值不为relative和static。 
    
    很明显,float和position不合适我们的需求。那只能从overflow或者display中选取一个。
    
    因为是应用了.clearfix和.menu的菜单极有可能是多级的,所以overflow: hidden或overflow: auto也不满足需求
    
    (会把下拉的菜单隐藏掉或者出滚动条),那么只能从display下手。 
     
    
    我们可以将.clearfix的display值设为table-cell, table-caption, inline-block中的任何一个
    
    但是display: inline-block会产生多余空白,所以也排除掉。
    
    剩下的只有table-cell, table-caption,为了保证兼容可以用display: table来使.clearfix形成一个Block Formatting Context
    
    因为display: table会产生一些匿名盒子,这些匿名盒子的其中一个(display值为table-cell)会形成Block Formatting Context。
    
    这样我们新的.clearfix就会闭合内部元素的浮动。 
    

      这就是为什么选择display:table的原因。

  • 相关阅读:
    Oracle DBA 数据库结构试题2
    Oracle DBA启动和关闭例程试题
    Oracle 命令大汇总备份与恢复
    数据库管理应注意的问题
    Using ICSharpCode.SharpZipLib for zip file
    SQL 2005 新功能
    ASP.net的RUL重写
    datalist 的 Datasource怎样绑定 泛型 List
    文件压缩/解压缩开源项目SharpZipLib在C#中的使用
    asp.net页面间传值的9种方式
  • 原文地址:https://www.cnblogs.com/tinyTea/p/5849868.html
Copyright © 2020-2023  润新知