資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學使用 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+ 次瀏覽
廣告