CSS - clear 属性_CSS 菜鸟教程

CSS clear 属性确定元素相对于前一个浮动元素的流向。它确定元素是应显示在浮动元素的旁边还是其下方。

语法

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

属性值

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

CSS Clear 属性示例

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

清除 None 值的属性

要让一个元素与浮动元素一起放置，左浮动或右浮动，我们使用 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 属性</h2>
   <p>
Clear：None，如果存在空格，则将元素放置在浮动元素旁边。
   </p>
   <div>
      <div class=" common float-left">
        Left Float
      </div>
      <div class="element">
         <p>
由于使用了 none 值的clear，此元素被放置在左侧浮动元素旁边。
         </p>
      </div>
   </div>
   <br/>
   <div>
      <div class="common float-right">
        Right Float
      </div>
      <div class="element">
         <p>
由于使用了 none 值的clear，此元素被放置在右侧浮动元素旁边。
         </p>
      </div>
   </div>
</body>

</html>

清除具有 left 值的属性

为了让元素被放置在 left 浮动元素的下方，我们使用 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 属性</h2>
   <p>
Clear：left，它将元素放置在左浮动元素下方。
   </p>
   <div>
      <div class="common float-left">
        Left Float
      </div>
      <div class="element">
         <p>
由于使用了带 left 值的 clear，此元素被放置在左浮动元素的下方。
         </p>
      </div>
   </div>
   <br/>
</body>

</html>

清除具有 right 值的属性

为了让一个元素被放置在一个 right 浮动元素下面，我们使用 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 属性示例</h2>
   <p>
Clear：right，它将元素放置在右侧浮动元素的下方。
   </p>
   <div>
      <div class="common float-right">
        Right Float
      </div>
      <div class="element">
         <p>
由于使用了具有 right 值的clear，此元素被放置在右侧浮动元素的下方。
         </p>
      </div>
   </div>
   <br/>
</body>

</html>

清除具有 Both 值的属性

为了让一个元素同时放置在左右浮动元素的下方，我们使用 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 属性示例</h2>
   <p>
Clear：Both，它将元素放置在左右浮动元素的下方。
   </p>
   <div>
      <div class=" common float-left">
        Left Float
      </div>
      <div class="common float-right">
        Right Float
      </div>
      <div class="element">
         <p>
由于使用了 clear 和 both 值，此元素被放置在左右浮动元素的下方。
         </p>
      </div>
   </div>
</body>

</html>

支持的浏览器

属性
clear	1.0	5.0	1.0	1.0	6.0

<< CSS - @charset 属性 CSS - clip-path 属性 >>