CSS clear 属性

实例

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

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

浏览器支持


IE Firefox Chrome Safari Opera
ie firefox chrome safari opera

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

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

定义和用法

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

说明

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

默认值: none
继承性: no
版本: CSS1
JavaScript 语法: object.style.clear="left"

可能的值

描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。

实例

清除元素的侧面

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

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

相关页面

CSS 教程:CSS 定位

HTML DOM 参考手册:clear 属性