技术分享CSS清除浮动的另一种别致方法

例如：

ExampleSourceCode

 
 
 

  
  
  
 
  
  
  

  
  
  
height:40px;background:#EEE;">SomeContent div>
  
  
  
 div>
  
  
  

 
 
 

　　此时预览此代码，我们会发现最外层的父元素floatcontainer,并没有显示。这是因为子元素因进行了浮动，而脱离了文档流，导致父元素的height为零。

　　若将代码修改为：

ExampleSourceCode

 
 
 

  
  
  
 
  
  
  

  
  
  
background:#EEE;">SomeContent div>
  
  
  
 div>
  
  
  
 div>
 
 
 

　　注意，多了一段清理浮动的代码。这是一种好的CSS代码习惯，但是这种方法增加了无用的元素。这里有一种更好的方法，将HTML代码修改为：

ExampleSourceCode

 
 
 

  
  
  

  
  
  
 
  
  
  

  
  
  
background:#EEE;">SomeContent div>
  
  
  
 div>
 
 
 

　　◆定义CSS类，进行“浮动清理”的控制：

ExampleSourceCode

 
 
 

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

 
 
 

 此时，预览以上代码(删去这种注释)，会发现即使子元素进行了浮动，父元素floatcontainer仍然会将其包围，进行高度自适应。

代码参考：http://www.positioniseverything.net/easyclearing.html

clear元素的margin-top被重置为零。

当前标题：技术分享CSS清除浮动的另一种别致方法
文章起源：http://www.mswzjz.com/qtweb/news6/181056.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联