首页 - 文章 - (X)HTML/CSS - (X)HTML/CSS教程

不增加额外元素实现清除浮动（ 闭合浮动元素 Clear Floats ）

作者: CodeBit.cn     来源: positioniseverything.net     时间: 2007-12-02 21:53:46
摘要: 浮动（Float）是页面布局中经常用到的技巧，但是，同时也出现了很多由于浮动引发的问题；父元素不能闭合具有浮动属性的子元素，是这些问题中最常见且最让新手头痛的一个。

清除浮动常见的做法是加一个额外的标签，然后给这个标签加上 clear:both 的设置，追求完美的人当然不乐意这种方式，于是，便有了本文将要介绍的：不增加额外元素实现清除浮动的方法。
归类: (X)HTML/CSS,

关键词: 清除, 浮动, Clear, Float, 闭合, 布局,


浮动（Float）是页面布局中经常用到的技巧，但是，同时也出现了很多由于浮动引发的问题；父元素不能闭合具有浮动属性的子元素，是这些问题中最常见且最让新手头痛的一个。

清除浮动常见的做法是加一个额外的标签，然后给这个标签加上 clear:both 的设置，追求完美的人当然不乐意这种方式，于是，便有了本文将要介绍的：不增加额外元素实现清除浮动的方法。


CSS:
  1.  
  2. <style type="text/css"> 
  3.  
  4. /* 
  5. 说明：不增加额外元素实现清除浮动（ 闭合浮动元素 Clear Floats ） 
  6. 整理： CodeBit.cn ( http://www.CodeBit.cn ) 
  7. */ 
  8.  
  9. .clearfix:after { 
  10.     content: ".";  
  11.     display: block;  
  12.     height: 0;  
  13.     clear: both;  
  14.     visibility: hidden; 
  15. } 
  16.  
  17. .clearfix {display: inline-block;} 
  18.  
  19. /* Hides from IE-mac \*/ 
  20. * html .clearfix {height: 1%;} 
  21. .clearfix {display: block;} 
  22. /* End hide from IE-mac */ 
  23.  
  24. </style> 
  25.  



使用时，给需要清除浮动的元素增加一个 clearfix 的 class 即可。


相关文章
发表评论 有想法？点此发表评论？
推荐链接：(联系 QQ ：326801485)