深入学习CSS clear属性用法

开发 前端
CSS clear属性的用法你是否了解,这里向大家描述一下,clear 属性规定元素的哪一侧不允许其他浮动元素,希望你会感兴趣。

本文和大家重点讨论一下CSS clear属性的用法,clear 属性定义了元素的哪边上不允许出现浮动元素。

CSS clear属性

定义和用法

clear 属性规定元素的哪一侧不允许其他浮动元素。

说明

clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中,这是通过自动为清除元素(即设置了 clear 属性的元素)增加上外边距实现的。在 CSS2.1 中,会在元素上外边距之上增加清除空间,而外边距本身并不改变。不论哪一种改变,最终结果都一样,如果声明为左边或右边清除,会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

实例

图像的左侧和右侧均不允许出现浮动元素:

  1. img  
  2.   {  
  3.   float:left;  
  4.   clear:both;  
  5.   }  

浏览器支持

所有主流浏览器都支持 clear 属性。

注释:任何版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

可能的值

TIY 实例

  1. <html>    
  2. <head>   
  3. <style type="text/css"> img      
  4. {      
  5. float:left;    clear:both;      
  6. }    
  7. </style>   
  8. </head>    
  9. <body> <img src="www.68tt.com/i/eg_smile.gif" />   
  10. <img src="/i/eg_smile.gif" />   
  11. </body>    
  12. </html>  

本例演示如何使用清除元素侧面的浮动元素。
 

【编辑推荐】

  1. CSS元素水平居中行之有效的办法
  2. IE6.0对padding的解读分析
  3. CSS样式表高效使用八大秘诀
  4. CSS margin-bottom属性使用秘诀
  5. IE6中常见CSS兼容性解决十大技巧

 

 

责任编辑:佚名 来源: 68tt.com
相关推荐

2010-08-23 09:01:45

MarginPadding

2010-09-02 09:09:38

display:inlCSS

2010-08-19 12:55:55

CSSMarginPadding

2010-08-16 11:05:54

DIV+CSS

2010-08-25 11:05:03

CSSpaddingmargin

2010-09-09 15:08:40

CSSfloatclear

2010-08-31 13:06:45

CSS

2010-09-06 11:26:18

CSS伪类

2010-09-07 10:57:34

CSS伪类

2010-08-27 10:04:33

borderclearCSS

2010-08-16 08:54:48

DIVCSS

2010-07-14 13:18:40

Perl开发工具

2010-07-16 16:09:05

Perl文件

2010-09-08 13:14:03

CSS滤镜

2010-09-14 17:20:03

CSS DIV相对定位

2010-07-14 17:43:25

Perl运算符

2010-09-10 09:42:37

borderclearCSS

2010-09-01 08:58:58

2010-07-12 15:00:56

UML状态机视图

2010-08-24 09:52:55

DIV标签
点赞
收藏

51CTO技术栈公众号