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

列印頁面