三种实用CSS清除浮动方法揭秘

开发 前端
这里向大家描述一下三种实用CSS清除浮动的方法,用DIV CSS网页布局,经常性地会使用到float,而清除浮动是必须要做的。

本文向大家描述一下CSS清除浮动的方法,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一,相信本文介绍一定会让你有所收获。

DIV CSS经验:三种实用CSS清除浮动的方法

前言

用DIV CSS网页布局,经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,关于清除浮动,在52CSS.com上有过很多介绍。清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一。

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

  http://www.52css.com/article.asp?id=915

  CSS经验分享:清除浮动及闭合浮动元素方法的总结

  http://www.52css.com/article.asp?id=968

  下面看今天的教程,此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景。

ExampleSourceCode

  1. <styletypestyletype=”text/css”> 
  2. *{margin:0;padding:0;}  
  3. body{font:36pxbold;color:#F00;text-align:center;}  
  4. #layout{background:#FF9;}  
  5. #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}  
  6. #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}  
  7. > 
  8. style> 
  9. <dividdivid=”layout”> 
  10. <dividdivid=”left”>Leftdiv> 
  11. <dividdivid=”right”>Rightdiv> 
  12. div> 
  13.  

 

未清除浮动前如图所示:

一、使用空标签清除浮动

  我用了很久的一种方法,空标签可以是div标签,也可以是P标签。我习惯用

,够简短,也有很多人用


,只是需要另外为其清除边框,但理论上可以是任何标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清楚浮动,并为其定义CSS代码:clear:both。此方法的弊端在于增加了无意义的结构元素。

ExampleSourceCode

  1. <styletypestyletype=”text/css”> 
  2. *{margin:0;padding:0;}  
  3. body{font:36pxbold;color:#F00;text-align:center;}  
  4. #layout{background:#FF9;}  
  5. #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}  
  6. #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}  
  7. .clr{clear:both;}  
  8. > 
  9. style> 
  10. <dividdivid=”layout”> 
  11. <dividdivid=”left”>Leftdiv> 
  12. <dividdivid=”right”>Rightdiv> 
  13. <pclasspclass=”clr”> 
  14. div> 
  15.  

 

#p#二、使用overflow属性

  此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性:overflow:auto,即可!”zoom:1″用于兼容IE6。

ExampleSourceCode

  1. <styletypestyletype=”text/css”> 
  2. *{margin:0;padding:0;}  
  3. body{font:36pxbold;color:#F00;text-align:center;}  
  4. #layout{background:#FF9;overflow:auto;zoom:1;}  
  5. #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}  
  6. #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}  
  7. > 
  8. style> 
  9. <dividdivid=”layout”> 
  10. <dividdivid=”left”>Leftdiv> 
  11. <dividdivid=”right”>Rightdiv> 
  12. div> 
  13.  

 三、使用after伪对象清楚浮动

  该方法只适用于非IE浏览器。具体写法可参照以下示例。

使用中需注意以下几点。

一、该方法中必须为需要清除浮动元素的伪对象中设置height:0,否则该元素会比实际高出若干像素;

二、content属性是必须的,但其值可以为空,蓝色理想讨论该方法的时候content属性的值设为”.”,但我发现为空亦是可以的。

ExampleSourceCode

  1. <styletypestyletype=”text/css”> 
  2. *{margin:0;padding:0;}  
  3. body{font:36pxbold;color:#F00;text-align:center;}  
  4. #layout{background:#FF9;}  
  5. #layout:after{display:block;clear:both;content:”";visibility:hidden;height:0;}  
  6. #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}  
  7. #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}  
  8. > 
  9. style> 
  10. <dividdivid=”layout”> 
  11. <dividdivid=”left”>Leftdiv> 
  12. <dividdivid=”right”>Rightdiv> 
  13. div> 
  14.  

   清楚浮动后如图所示:

  此三种方法各有利弊,使用时应择优选择,比较之下第二种方法更为可取。
 

【编辑推荐】

  1. CSS中id与class使用原则
  2. 深入剖析CSS层叠与继承的使用
  3. 专家推荐三大“顶级”CSS技巧!
  4. 探究网页布局中CSS无效的十个常见原因
  5. DIV CSS初学者必须掌握的10个问题与技巧

 

 

责任编辑:佚名 来源: 52css.com
相关推荐

2010-08-31 13:18:22

CSS浮动

2010-09-02 14:17:56

CSS浮动

2010-09-02 09:14:35

CSS浮动

2009-11-06 13:23:27

WCF模式

2010-09-08 13:29:48

CSS

2019-04-16 11:21:50

Linux动态库软连接

2010-09-14 15:10:49

CSS注释

2023-05-15 08:34:36

css浮动

2010-09-02 16:26:59

CSS命名

2010-09-06 10:04:31

CSS样式表

2009-07-17 09:47:41

Linux RootLinux使用Linux开发

2010-08-23 10:04:48

CSS浮动

2010-06-13 16:04:14

MySQL三种安装方式

2010-09-07 16:31:27

CSS

2023-12-04 09:31:13

CSS卡片

2010-08-26 16:19:41

DIV圆角

2019-08-30 17:24:41

microservic微服务

2010-08-24 14:47:48

CSS居中

2010-09-06 15:46:08

CSSDIV

2022-11-30 15:15:48

点赞
收藏

51CTO技术栈公众号