資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學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”屬性。
我們對“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
在下面的示例中，父元素包含多個“child”元素。它還在多個“child”元素之間包含一個“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
在下面的示例中，我們建立了 main 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 元素可能會溢位，看起來很奇怪。
但是，使用者可以使用“overflow” CSS 屬性來解決使用“float”屬性時發生的溢位問題。
瀏覽量 334
