詳解CSS `clear` 屬性及其各個選項
- 1. `clear: left;`
- 示例代碼
- 2. `clear: right;`
- 示例代碼
- 3. `clear: both;`
- 示例代碼
- 4. `clear: none;`
- 示例代碼
- 總結
在CSS布局中，clear 屬性是一個非常重要的工具，特別是在處理浮動元素時。本文將詳細解釋 clear 屬性及其各個選項，并提供相應的示例代碼，幫助你更好地理解和使用這個屬性。
1. clear: left;
clear: left; 表示該元素的左側不允許浮動元素。如果左側有浮動元素，則該元素會移動到浮動元素的下方。
示例代碼
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Clear Left Example</title><style>.float-left {float: left;width: 100px;height: 100px;background-color: lightblue;}.clear-left {clear: left;background-color: lightgreen;}</style>
</head>
<body><div class="float-left">Float Left</div><div class="clear-left">Clear Left</div>
</body>
</html>
2. clear: right;
clear: right; 表示該元素的右側不允許浮動元素。如果右側有浮動元素，則該元素會移動到浮動元素的下方。
示例代碼
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Clear Right Example</title><style>.float-right {float: right;width: 100px;height: 100px;background-color: lightcoral;}.clear-right {clear: right;background-color: lightyellow;}</style>
</head>
<body><div class="float-right">Float Right</div><div class="clear-right">Clear Right</div>
</body>
</html>
3. clear: both;
clear: both; 表示該元素的左右兩側都不允許浮動元素。如果左右兩側都有浮動元素，則該元素會移動到所有浮動元素的下方。
示例代碼
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Clear Both Example</title><style>.float-left {float: left;width: 100px;height: 100px;background-color: lightblue;}.float-right {float: right;width: 100px;height: 100px;background-color: lightcoral;}.clear-both {clear: both;background-color: lightgray;}</style>
</head>
<body><div class="float-left">Float Left</div><div class="float-right">Float Right</div><div class="clear-both">Clear Both</div>
</body>
</html>
4. clear: none;
clear: none; 是默認值，允許浮動元素出現在元素的左右兩側。
示例代碼
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Clear None Example</title><style>.float-left {float: left;width: 100px;height: 100px;background-color: lightblue;}.float-right {float: right;width: 100px;height: 100px;background-color: lightcoral;}.clear-none {clear: none;background-color: lightgray;}</style>
</head>
<body><div class="float-left">Float Left</div><div class="float-right">Float Right</div><div class="clear-none">Clear None</div>
</body>
</html>
總結
通過這些示例，你可以更好地理解 clear 屬性及其各個選項的作用。clear 屬性是處理浮動元素布局問題的重要工具，通過設置不同的值，你可以控制元素在浮動元素之后的顯示位置，從而實現更靈活和穩定的布局。
![[EAI-023] FAST，機器人動作專用的Tokenizer，提高VLA模型的能力和訓練效率](http://pic.xiahunao.cn/[EAI-023] FAST，機器人動作專用的Tokenizer，提高VLA模型的能力和訓練效率)
)
數據分析學習)
