CSS清除浮动的方法

作者：Liaodeity - 2015年04月03日

常用的CSS清除浮动的方法，通过after伪类:after和IEhack来实现，完全兼容当前主流浏览器。

.clearfix:after  
{  
  content: ".";  
  clear: both;  
  height: 0;  
  visibility: hidden;  
  display: block;  
} /* 这是对Firefox进行的处理，因为Firefox支持生成元素，而IE所有版本都不支持生成元素 */ 
.clearfix{display: inline-block;} /* 这是对 Mac 上的IE浏览器进行的处理 */ 
* html .clearfix{ height: 1%; } /* 这是对 Win上 的 IE6 浏览器进行的处理 */ 
* + html .clearfix{ height: 1%; } /* 这是对 Win 上的 IE7 浏览器进行的处理 */ 
.clearfix{display: block;} /* 这是对display: inline-block;进行的修改，重置为区块元素*/

清理浮动的代码

.clearfix:after {
    content: "020";
    display: block;
    height: 0;
    clear: both;
}
.clearfix {
    zoom: 1;
}

本文作者： Liaodeity

本文链接： https://www.jianbaizhan.com/article/193

版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！