什么是CSS规则“clear：both”的作用？

我们使用CSS中的“float”属性让元素浮动在左侧或右侧。因此，每当我们为任何HTML元素设置“float”属性时，它就会从文档的正常流中取出，并且有时会创建很多问题。

CSS的“clear”属性允许开发人员设置与浮动元素相邻的元素的位置。但是，它始终将下一个元素推到浮动元素下方。

CSS的“clear”属性可以有四个不同的值：’left’，’right’，’both’和’inherit’。’left’值用于将下一个元素推到左浮动元素下方。’right’值用于将下一个元素推到右浮动元素下方。’both’值用于将下一个元素推到左浮动元素和右浮动元素下方。

在本教程中，我们将使用一些示例讨论“clear” CSS属性的“both”值。

Syntax

用户可以按照以下语法使用“clear：both”CSS规则。

Css_selector {
   Clear: both;
}

在上面的语法中，CSS_selector用于选择在浮动元素旁边的元素。

示例1

在下面的示例中，“parent” div元素包含一个“child”元素和一个“text”元素。在此之后，我们还为子元素和浮动元素设置了固定的尺寸和“float：left”属性。

我们使用“clear：both”CSS属性和“text”元素。在输出中，用户可以观察到文本内容已下移，而不是浮动在子div元素的右侧。

<html>
<style>
   .parent {
      width: 500px;
      height: 300px;
      background-color: green;
      border-radius: 12px;
      border: 3px solid orange;
   }
   .child1 {
      width: 200px;
      height: 200px;
      background-color: red;
      border-radius: 12px;
      border: 2px dotted pink;
      margin: 10px;
      float: left;
   }
   .text {
      font-size: 1.2rem;
      clear: both;
      color: white;
      height: 20px;
   }
</style>
<body>
   <h3>使用“clear：both”CSS属性将下一个元素推到左浮动元素下方</h3>
   <div class = "parent">
      <div class = "child1"> </div>
      <p class = "text">嘿！你怎么样？你还好吗？</p>
   </div>
</body>
</html>

示例2

在下面的示例中，parent元素包含多个“child”元素。此外，它在多个“child”元素之间包含了“clear” div元素。我们为每个子div元素设置了“float：right” CSS属性。

此外，我们还通过“clear：both” CSS属性设置了“clear” div元素。在输出中，用户可以观察所有div元素向右浮动。而且，由于“clear” div在子div元素中间，因此“clear：both” CSS属性显示了所有紧挨着它的子元素下方。

<html>
<style>
   .parent {
      width: 600px;
      height: 300px;
      background-color: blue;
      border-radius: 12px;
      border: 3px solid orange;
   }
   .child {
      width: 100px;
      height: 100px;
      border: 2px dotted pink;
      margin: 10px;
      background-color: white;
      border-radius: 12px;
      float: right;
   }
   .clear { clear: both;}
</style>
<body>
   <h3>使用“clear：both”CSS属性将下一个元素推到左浮动元素下方</h3>
   <div class = "parent">
      <div class = "child"> </div>
      <div class = "child"> </div>
      <div class = "child"> </div>
      <div class = "clear"> </div>
      <div class = "child"> </div>
      <div class = "child"> </div>
   </div>
</body>
</html>

示例3

在下面的示例中，我们创建了主div元素。左侧div元素向左浮动，右侧div元素向右浮动。

在输出中，用户可以使用单选按钮设置“clear”属性的“both”或“none”值。用户可以选择不同的单选按钮并观察输出。当我们选择“both”时，它会显示中心div在两个浮动div元素下方。

<html>
<head>
   <style>
      .main {
         width: 600px;
         height: 200px;
         background-color: pink;
         border-radius: 12px;
         border: 3px solid orange;
         margin-bottom: 20px;
      }
      .right,
      .left {
         width: 200px;
         height: 120px;
         background-color: aqua;
      }
      .right {float: right;}
      .left {float: left;}
      .center {
         width: auto;
         height: auto;
         font-size: 2rem;
         background-color: yellow;
         color: blue;
         clear: both;
      }
   </style>
</head>
<body>
   <h3>使用“clear：both”CSS属性将下一个元素推到左浮动元素下方</h3>
   <div class = "main">
      <div class = "left"> </div>
      <div class = "right"> </div>
      <div class = "center">这是位于左侧和右侧div元素中央的div。</div>
   </div>
   <input type = "radio" name = "clear" id = "both" value = "both" checked />both
   <input type = "radio" name = "clear" id = "none" value = "none" />none
   <script>
      let allRadio = document.getElementsByName('clear');
      console.log(allRadio)
      for (let i = 0; i < allRadio.length; i++) {
         allRadio[i].addEventListener('click', () => {
            console.log(allRadio[i].value)
            let centerDiv = document.getElementsByClassName('center');
            centerDiv[0].style.clear = allRadio[i].value;
         })
      }
   </script>
</body>
</html>

我们已经看到了“clear: both” CSS属性的各种用途。我们使用“clear”属性来显示漂浮元素下面的下一个元素。当开发人员不确定漂浮元素的下一个元素的尺寸时，他们应该使用“clear” CSS属性; 否则，HTML元素的溢出可能会发生，看起来很奇怪。

然而，在使用“float”属性时，用户可以使用“overflow” CSS属性来解决溢出问题。