舉例說明clear取值有哪些？

王铁柱6發表於2024-11-29

在前端開發中，clear 屬性用於清除浮動元素對當前元素的影響。它可以接受以下值：

  • none (預設值): 不清除任何浮動元素。這意味著當前元素可能會被之前的浮動元素覆蓋或環繞。

  • left: 清除左側的浮動元素。當前元素會移動到左側所有浮動元素的下方。

  • right: 清除右側的浮動元素。當前元素會移動到右側所有浮動元素的下方。

  • both: 清除左側和右側的浮動元素。當前元素會移動到左右兩側所有浮動元素的下方。

  • inline-start: 清除內聯開始方向的浮動。在從左到右的書寫模式（例如英語）中，這等同於 left。在從右到左的書寫模式（例如阿拉伯語）中，這等同於 right。

  • inline-end: 清除內聯結束方向的浮動。在從左到右的書寫模式中，這等同於 right。在從右到左的書寫模式中，這等同於 left。

程式碼示例：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  border: 1px solid black;
}
.float-left {
  float: left;
  width: 100px;
  height: 100px;
  background-color: lightblue;
}
.clear-left {
  clear: left;
  background-color: lightcoral;
  height: 50px;
}
.clear-both {
  clear: both;
  background-color: lightgreen;
  height: 50px;
}


</style>
</head>
<body>

<div class="container">
  <div class="float-left">Float Left</div>
  <div class="clear-left">Clear Left</div>
  <div class="clear-both">Clear Both</div>
</div>

</body>
</html>

在這個例子中：

  • float-left 元素向左浮動。
  • clear-left 元素清除了左側的浮動，所以它出現在藍色浮動元素的下方。
  • clear-both 元素清除了兩側的浮動，即使右側沒有浮動元素，它也會出現在藍色浮動元素的下方。

何時使用 clear:

clear 通常用於在浮動元素之後，防止後續內容被浮動元素覆蓋或環繞。例如，在一個包含浮動影像和後續文字的佈局中，可以使用 clear 確保文字出現在影像下方，而不是環繞影像。

希望這些例子能幫助你理解 clear 屬性的不同取值及其用法。

相關文章