CSS - clear 属性

CSS 的**clear**属性决定了元素相对于前面浮动元素的流动方式。它决定了元素应该显示在浮动元素旁边还是下面。

语法

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

属性值

值	描述
none	元素不会被推到左侧或右侧浮动元素的下方。默认值
left	元素被推到左侧浮动元素的下方。
right	元素被推到右侧浮动元素的下方。
both	元素被推到左侧和右侧浮动元素的下方。
initial	将属性设置为其默认值。
inherit	从父元素继承属性。

CSS clear 属性示例

以下示例说明了具有不同值的**clear**属性。

带有 none 值的 clear 属性

要让元素放置在浮动元素（左浮动或右浮动）旁边，我们使用**none**值。如果存在空间，则元素将放置在浮动元素旁边。以下示例显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .common {
         width: 150px;
         height: 100px;
         text-align: center;
      }

      .float-left {
         float: left;
         background-color: lightblue;
         margin-right: 10px;
      }

      .float-right {
         float: right;
         background-color: lightcoral;
      }

      .element {
         clear: none;
         background-color: lightgreen;
         height: 100px;
      }
   </style>
</head>

<body>
   <h2>
      CSS clear property
   </h2>
   <p>
      Clear: None, it places the element 
      alongside the floating element if 
      space exists.
   </p>
   <div>
      <div class=" common float-left">
        Left Float
      </div>
      <div class="element">
         <p>
            See this element is placed alongside the left
            floating element due to the using of clear with
            none value.
         </p>
      </div>
   </div>
   <br/>
   <div>
      <div class="common float-right">
        Right Float
      </div>
      <div class="element">
         <p>
            See this element is placed alongside
            the right floating element due to the
            using of clear with none value.
         </p>
      </div>
   </div>
</body>

</html>

带有 left 值的 clear 属性

要让元素放置在左侧浮动元素下方，我们使用**left**值。以下示例显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .float-left {
         width: 150px;
         height: 100px;
         text-align: center;
         float: left;
         background-color: lightblue;
      }

      .element {
         clear: left;
         background-color: lightgreen;
         height: 100px;
      }
   </style>
</head>

<body>
   <h2>
      CSS clear property
   </h2>
   <p>
      Clear: Left, it places the element below the
      left floating element.
   </p>
   <div>
      <div class="common float-left">
        Left Float
      </div>
      <div class="element">
         <p>
            See this element is placed below the
            left floating element due to the using
            of clear with left value.
         </p>
      </div>
   </div>
   <br/>
</body>

</html>

带有 right 值的 clear 属性

要让元素放置在右侧浮动元素下方，我们使用**right**值。以下示例显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .float-right {
         width: 150px;
         height: 100px;
         text-align: center;
         float: right;
         background-color: lightcoral;
      }

      .element {
         clear: right;
         background-color: lightgreen;
         height: 100px;
      }
   </style>
</head>

<body>
   <h2>
      CSS clear property
   </h2>
   <p>
      Clear: Right, it places the element below the
      right floating element.
   </p>
   <div>
      <div class="common float-right">
        Right Float
      </div>
      <div class="element">
         <p>
            See this element is placed below the
            right floating element due to the using
            of clear with right value.
         </p>
      </div>
   </div>
   <br/>
</body>

</html>

带有 both 值的 clear 属性

要让元素放置在左侧和右侧浮动元素下方，我们使用**both**值。以下示例显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .common {
         width: 150px;
         height: 100px;
         text-align: center;
      }

      .float-left {
         float: left;
         background-color: lightblue;
         margin-right: 10px;
      }

      .float-right {
         float: right;
         background-color: lightcoral;
      }

      .element {
         clear: both;
         background-color: lightgreen;
         height: 100px;
      }
   </style>
</head>

<body>
   <h2>
      CSS clear property
   </h2>
   <p>
      Clear: Both, it places the element below both
      the left and right floating elements.
   </p>
   <div>
      <div class=" common float-left">
        Left Float
      </div>
      <div class="common float-right">
        Right Float
      </div>
      <div class="element">
         <p>
            See this element is placed below both
            the left and right floating elements
            due to the using of clear with both value.
         </p>
      </div>
   </div>
</body>

</html>

支持的浏览器

属性
clear	1.0	5.0	1.0	1.0	6.0

css_properties_reference.htm

打印页面