CSS 规则"clear:both"的作用是什么?

cssweb developmentfront end technology更新于 2024/5/10 7:40:17

我们使用 CSS 中的"float"属性来保持元素在左侧或右侧浮动。因此，每当我们为任何 HTML 元素设置"float"属性时，它都会脱离文档的正常流，有时这会产生很多问题。

CSS 属性"clear"允许开发人员设置浮动元素旁边元素的位置。但是，它始终会将下一个元素推到浮动元素的下方。

CSS 的"clear"属性可以有 4 个不同的值:"left"、"right"、"both"和"inherit"。"left"值用于将下一个元素推到左浮动元素的下方。"right"值用于将下一个元素推到右浮动元素的下方。 "both"值用于将下一个元素推到左浮动和右浮动元素的下方。

在本教程中，我们将通过一些示例讨论 CSS 属性"clear"的"both"值。

语法

用户可以按照以下语法使用"clear:both"CSS 规则。

Css_selector {
    Clear:both;
}

在上述语法中，CSS_selector 用于选择位于浮动元素的下一个元素。

示例 1

在下面的示例中，"parent"div 元素包含一个"child"元素和一个"text"元素。这里，我们为父元素指定了固定尺寸。之后，我们还为子元素设置了固定尺寸和"float: left"属性。

我们在"text"元素中使用了"clear: both"CSS属性。在输出中，用户可以观察到文本内容位于子 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> Using the <i> clear: both </i> CSS property to push the next element at below of left-floated element </h3>
   <div class = "parent">
      <div class = "child1"> </div>
      <p class = "text"> Hey! How are you? Are you fine? </p>
   </div>
</body>
</html>

示例 2

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

此外，我们为"clear"div 元素设置了"clear: both"CSS 属性。在输出中，用户可以看到所有 div 元素都向右浮动。此外，由于"clear"div 位于子 div 元素的中间，"clear: both"CSS 属性会显示"clear"div 下方与其相邻的所有子元素。

<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> Using the <i> clear: both </i> CSS property to push the next element below the left-floated element </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 元素。"left"div 元素在容器中向左浮动，而"right"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> Using the <i> clear: both </i> CSS property to push the next element at below of left-floated element </h3>
   <div class = "main">
      <div class = "left"> </div>
      <div class = "right"> </div>
      <div class = "center"> This is a div in the center of the left and right div element. </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>

我们已经了解了 CSS 属性"clear:both"的各种用法。我们使用"clear"属性在浮动元素下方显示下一个元素。当开发人员不确定浮动元素的下一个元素的尺寸时，应该使用"clear"CSS 属性;否则，HTML 元素可能会溢出，看起来很奇怪。

但是，用户可以在使用"float"属性的同时，使用"overflow"CSS 属性来解决溢出问题。