Universal clear floating style

This is a very popular method of clearing floats and has been fully adopted in many large projects.

This method comes from positioniseverything, implemented through the after pseudo-class: after and IEhack, and is fully compatible with current mainstream browsers.

.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;进行的修改，重置为区块元素*/

The following is a code used by admin10000.com to clean up floats

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

This is an optimized version of the clear floating style, which is highly recommended.

Related documents: Summary of common methods for clearing floats in CSS

The above is the detailed content of Universal clear floating style. For more information, please follow other related articles on the PHP Chinese website!