Rumah  >  Artikel  >  hujung hadapan web  >  万能清除浮动样式

万能清除浮动样式

巴扎黑
巴扎黑asal
2017-04-05 11:02:141947semak imbas

这个是一个很流行的清除浮动的方法,在很多大项目上已经被完全采用。

这个方法来源于positioniseverything,通过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;进行的修改,重置为区块元素*/

 

下面给一个admin10000.com 用的清理浮动的代码

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

这个是优化版的清除浮动的样式,很值得推荐。

相关文档:CSS清除浮动常用方法小结

Atas ialah kandungan terperinci 万能清除浮动样式. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn