极客笔记CSS 规则“clear: both”是什么作用
在CSS中，我们使用“float”属性来使元素浮动在左侧或右侧。因此，每当我们为任何HTML元素设置“float”属性时，它都会被从文档的正常流中移出，有时会引发许多问题。
“clear” CSS属性允许开发人员设置紧挨着浮动元素的元素的位置。然而，它总是将下一个元素推到浮动元素的下方。
CSS的“clear”属性可以有4个不同的值：’left’，’right’，’both’和’inherit’。’left’值用于将下一个元素推到左浮动的元素下方。’right’值用于将下一个元素推到右浮动的元素下方。’both’值用于将下一个元素推到左浮动和右浮动的元素下方。
在本教程中，我们将讨论“clear”CSS属性的“both”值，并提供一些示例。
语法
用户可以按照以下语法使用“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> 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
在下面的示例中，父元素包含多个“子”元素。此外，它在多个“子”元素之间包含了“清除”div元素。我们为每个子div元素设置了“float: right” CSS属性。
此外，我们为“清除”div元素设置了“clear: both” CSS属性。在输出中，用户可以观察到所有div元素向右浮动。此外，由于“清除”div位于子div元素的中间，所以“clear: both” CSS属性会显示所有子元素在“清除”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>
我们已经看到了“clear: both” CSS属性的各种用例。我们使用了“clear”属性来显示下一个元素在浮动元素的下方。当开发人员不确定浮动元素的下一个元素的尺寸时，他们应该使用“clear” CSS属性；否则，HTML元素就会溢出，并且可能看起来很奇怪。
但是，用户可以在使用“float”属性时使用“overflow” CSS属性来解决溢出的问题。