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

开发 前端
上节我们介绍了CSS中清除浮动的三种方法,这里向大家描述一下另一种别致的方法,在进行浮动布局时,大多数人都深知,在必要的地方进行浮动清理。

本文和大家重点讨论一下CSS清除浮动的另一种别致的方法,在进行浮动布局时,大多数人都深知,在必要的地方进行浮动清理,相信本文介绍一定会让你有所收获。

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

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

例如:

ExampleSourceCode

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

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

  若将代码修改为:

ExampleSourceCode

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

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

ExampleSourceCode

  1. <divclassdivclass="clearfix"style="background:#666;"> 
  2.  
  3. <divstyledivstyle="float:left;width:30%;height:40px;  
  4. background:#EEE;">SomeContentdiv> 
  5. 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*/  
  20.  

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

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

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

【编辑推荐】

  1. CSS中link和import的区别
  2. CSS网页布局中文字排版九大技巧
  3. 深入学习CSS属性display:inline-block用法
  4. 实用但不被IE支持的十大CSS属性
  5. CSS中id与class命名规则及编码最佳习惯
责任编辑:佚名 来源: 52css.com
相关推荐

2010-08-23 10:04:48

CSS浮动

2014-09-17 14:37:06

2018-04-18 07:34:58

2010-07-21 16:23:09

运行telnet程序

2013-05-22 15:31:07

AOP的CGlib实现

2016-03-03 10:29:31

用户信息改进

2016-07-11 16:18:26

互联网

2009-06-17 12:01:21

Linux

2010-09-01 12:50:04

CSS清除浮动

2011-12-29 21:28:31

Metro UI

2023-06-18 23:19:17

ChatGPTPPT方式

2009-06-17 09:05:05

Linux隐藏网络链接命令

2015-07-28 13:36:04

2014-01-13 10:36:53

C++错误

2010-06-09 16:17:20

TCP IP协议网络故

2019-01-02 08:04:29

GAN损失函数神经网络

2011-07-21 14:17:15

Ceylon

2010-08-31 13:18:22

CSS浮动

2010-08-31 15:33:28

clearCSS

2013-09-30 10:13:08

IT女程序员
点赞
收藏

51CTO技术栈公众号