使用 CSS 的 clear 属性关闭浮动

我们可以使用 CSS clear 属性来指定浮动元素的哪一侧需要清除浮动内容。如果您想控制浮动元素旁边的元素，则可以使用 clear 属性。

语法

以下是 float 属性的语法：

clear: value;

其值可以是：

  • none − 元素不会设置在左侧或右侧浮动元素的下方。默认值。

  • left − 元素设置在左侧浮动元素的下方

  • right − 元素设置在右侧浮动元素的下方

  • both − 元素设置在左侧和右侧浮动元素的下方

示例

让我们来看一个 CSS clear 属性的示例。首先，设置要对齐的元素：

<p class="red">Important Notice</p>
<p class="clear red">Important Notice</p>
<p class="yellow">Mediocre Notice</p>
<p class="green">Ignorable Notice</p>

使用 float 属性将所有 <p> 元素浮动到左侧：

p {
   float: left;
   margin: 10px;
   padding: 10px;
   color:white;
}

第二个 <p> 元素设置了 clear 属性：

<p class="clear red">Important Notice</p>

这将清除：

.clear {
   clear: left;
}

让我们来看这个例子：

<!DOCTYPE html>
<html>
<head>
   <title>CSS Clear</title>
   <style>
      .clear {
         clear: left;
      }
      .yellow{
         background-color: #FF8A00;
      }
      .red{
         background-color: #F44336;
      }
      .green{
         background-color: #4CAF50;
      }
      p {
         float: left;
         margin: 10px;
         padding: 10px;
         color:white;
      }
   </style>
</head>
<body>
   <p class="red">Important Notice</p>
   <p class="clear red">Important Notice</p>
   <p class="yellow">Mediocre Notice</p>
   <p class="green">Ignorable Notice</p>
</body>
</html>

示例

让我们来看另一个 CSS clear 属性的示例。首先，设置 <p> 元素：

<p>I am okay with shared space</p>
<p class="noneFloat">I want a private space</p>
<p>I am also okay with shared space</p>
<p>Me too</p>

对于所有 <p> 元素，float 属性都设置为 left 值：

p {
   float: left;
   margin: 10px;
   padding: 10px;
   color:white;
   background-color: #48C9B0;
   border: 4px solid #145A32;
}

对于第二个 <p> 元素，将 clear 属性设置为 both，并将 float 属性设置为 none：float: none 将不允许元素浮动：

p.noneFloat{
   float: none;
   clear: both;
   color: #34495E;
}

这是示例：

<!DOCTYPE html>
<html>
<head>
   <title>CSS Clear</title>
   <style>
      p {
         float: left;
         margin: 10px;
         padding: 10px;
         color:white;
         background-color: #48C9B0;
         border: 4px solid #145A32;
      }
      p.noneFloat{
         float: none;
         clear: both;
         color: #34495E;
      }
   </style>
</head>
<body>
   <p>I am okay with shared space</p>
   <p class="noneFloat">I want a private space</p>
   <p>I am also okay with shared space</p>
   <p>Me too</p>
</body>
</html>

更新于：2024年1月2日

2K+ 次浏览

开启你的职业生涯

完成课程获得认证

开始学习
广告