CSS清除浮动行之有效的办法

开发 前端
本文向大家介绍一下CSS清除浮动的另一种别致的方法,在进行浮动布局时,大多数人都深知,在必要的地方进行浮动清理,这里和大家分享一下清除浮动的方法。

你对CSS清除浮动的方法是否了解,这里和大家分享一下,在进行浮动布局时,大多数人都深知,在必要的地方进行浮动清理:<divstyle="clear:both;"></div>。

CSS清除浮动的另一种别致的方法

  在进行浮动布局时,大多数人都深知,在必要的地方进行浮动清理:<divstyle="clear:both;"></div>。
例如:

ExampleSourceCode

  1. <divstyledivstyle="background:#666;"><!--floatcontainer--> 
  2. <divstyledivstyle="float:left;width:30%;height:40px;background:#EEE;"> 
  3.  
  4. SomeContent</div> 
  5. </div> 

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

  若将代码修改为:

ExampleSourceCode

  1. <divstyledivstyle="background:#666;"><!--floatcontainer--> 
  2. <divstyledivstyle="float:left;width:30%;  
  3. height:40px;background:#EEE;">SomeContent</div> 
  4. <divstyledivstyle="clear:both"></div> 
  5. </div> 

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

ExampleSourceCode

  1. <divclassdivclass="clearfix"style="background:#666;"><!--floatcontainer--> 
  2. <divstyledivstyle="float:left;width:30%;  
  3. height:40px;background:#EEE;">SomeContent</div> 
  4. </div> 

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

ExampleSourceCode

  1. .clearfix:after{}{  
  2. content:".";  
  3. clear:both;  
  4. height:0;  
  5. visibility:hidden;  
  6. display:block;  
  7. }  
  8. /*这是对Firefox进行的处理,因为Firefox支持生成元素,  
  9. 而IE所有版本都不支持生成元素*/  
  10. .clearfix{}{  
  11. display:inline-block;  
  12. }  
  13. /*这是对Mac上的IE浏览器进行的处理*/  
  14. /**//*HidesfromIE-mac\*/  
  15. *html.clearfix{}{height:1%;}  
  16. /*这是对win上的IE浏览器进行的处理*/  
  17. .clearfix{}{display:block;}  
  18. /*这是对display:inline-block;进行的修改,重置为区块元素*/  
  19. /**//*EndhidefromIE-mac*/  

  此时,预览以上代码(删去这种注释),会发现即使子元素进行了浮动,父元素floatcontainer仍然会将其包围,进行高度自适应。
  代码参考:http://www.positioniseverything.net/easyclearing.html
  clear元素的margin-top被重置为零

【编辑推荐】

  1. DIV+CSS网页布局对SEO的影响
  2. 实例解析CSS padding 属性用法
  3. 探究IE和Firefox下的2款HTTP调试工具用法
  4. CSS中padding-bottom属性用法解析
  5. 实现IE6、IE7、IE8多版本浏览器共存的五种方法
责任编辑:佚名 来源: div-css.net
相关推荐

2010-08-30 11:22:24

DIVCSS

2010-08-26 09:27:07

CSS居中

2010-05-25 14:42:58

删除SVN版本信息

2010-07-23 16:10:34

Perl用户函数

2010-07-06 11:44:49

UML活动图

2010-09-02 13:16:44

CSS水平居中

2010-07-29 10:09:09

Flex数据库

2010-08-06 09:28:53

Flex页面跳转

2010-07-06 13:11:50

Visio画UML图

2010-08-18 16:10:35

IE6CSS

2010-09-15 12:32:23

DIV页面

2010-03-23 16:41:17

云计算

2010-06-30 17:06:32

UML用例图

2010-09-10 13:24:21

DIV表格

2010-07-06 13:20:57

Visio画UML用例

2015-03-16 11:16:59

生物识别身份验证数据中心

2015-03-03 09:13:22

2010-05-12 16:25:07

Subversion入

2010-11-25 10:42:34

上网行为管理产品网康

2021-10-19 10:18:56

欺诈管理技术前线初创公司
点赞
收藏

51CTO技术栈公众号