CSS clear 属性-之路教程

语法

clear: none | left | right | both | initial | inherit;

clear 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        float: left;
        background: #ccc
      }
      .clear {
        clear: left;
      }
    </style>
  </head>
  <body>
    <img src="/.png">
    <p class="clear">总有一天你的棱角会被世界磨平，你会拔掉身上的刺，你会学着对讨厌的人微笑，你会变成一个不动声色的人。</p>
  </body>
</html>

具有 "left" 值的 clear 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        float: right;
        background: #ccc
      }
      .clear {
        clear: right;
      }
    </style>
  </head>
  <body>
    <img src="/onitroad-logo.png">
    <p class="clear">
      总有一天你的棱角会被世界磨平，你会拔掉身上的刺，你会学着对讨厌的人微笑，你会变成一个不动声色的人。
    </p>
  </body>
</html>

具有“both”值的 clear 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        float: right;
        background: #CCC;
      }
      p.clear {
        clear: both;
      }
    </style>
  </head>
  <body>
    <img src="/onitroad-logo.png" width="220" height="80">
    <p>
把痛苦停在昨天 把微笑留给明天
    </p>
    <p class="clear">总有一天你的棱角会被世界磨平，你会拔掉身上的刺，你会学着对讨厌的人微笑，你会变成一个不动声色的人。
    </p>
  </body>
</html>

CSS clear 属性

clear 属性与浮点数直接相关。

clear 属性用于指定元素是应该在浮动元素旁边还是应该在它们下面（清除）。

我们可以将 clear 属性应用于浮动和非浮动元素。
此属性有四个值：none、left、right 和 both。
“none”是默认值。
它允许在两侧浮动元素。
“left”值不允许左侧有任何浮动元素。
“Right”值不允许右侧有任何浮动元素。
“Both”值不允许左侧或者右侧有任何浮动元素。

初始值	none
应用于	块级元素。
继承	无效
可动画的	无效
版本	CSS1
DOM 语法	object.style.clear=“both”；

CSS clear 属性值说明

值	说明
none	允许在两侧浮动元素。它是此属性的默认值。
left	表示左侧不允许浮动元素。
right	表示右侧不允许浮动元素。
both	表示左右两侧都不允许浮动元素。
initial	使属性使用其默认值。
inherit	从其父元素继承属性。

日期：2020-06-02 22:14:21 来源：oir作者：oir

←CSS :checked伪类

CSS clip属性→

语法

clear 属性示例：

具有 "left" 值的 clear 属性示例：

具有“both”值的 clear 属性示例：

CSS clear 属性值说明

目录