<div> 清除 position 的作用及用法
<div> 是 HTML 中的一個標簽，用于定義一個可含有不同內容的區塊。而 position 是 CSS 中的一個屬性，用于定義一個元素的定位方式。當我們在使用 <div> 元素時，有時會遇到一些定位問題，這時可以通過清除 position 來解決。
在 CSS 中，position 屬性有以下幾個值： - static：默認值，元素按照正常文檔流進行布局。 - relative：元素相對于其正常位置進行定位，但仍保持其位置騰出空間。 - absolute：元素相對于其最近的非 static 定位祖先元素定位。 - fixed：元素相對于視口進行定位，不會隨滾動條滾動。 - sticky：元素根據用戶的滾動位置進行定位。
當一個元素使用了相對定位或絕對定位時，它的定位會脫離文檔流，導致其他元素的位置受影響。這時可以使用清除 position 的方法，使元素重新回到正常文檔流中。
下面通過幾個代碼案例來詳細解釋清除 position 的用法。
案例一： 假設有兩個 <div> 元素，一個是父元素，一個是子元素，并且子元素使用了相對定位。在這種情況下，子元素的定位可能會導致父元素發生高度塌陷。

HTML 代碼：

<div class="parent">
<div class="child">子元素</div>
</div>

CSS 代碼：

.parent {
height: 100px;
}
<br>
.child {
position: relative;
top: 50px;
}

在這段代碼中，父元素的高度設置為 100px，子元素使用了相對定位，并向上偏移了 50px。
通過清除 position 可以解決父元素高度塌陷的問題。

CSS 代碼：

.parent::after {
content: "";
display: block;
clear: both;
}

在這段代碼中，使用 ::after 偽元素在父元素的末尾插入一個空的塊級元素，并設置 clear 屬性為 both，這樣就可以清除子元素的定位影響，恢復父元素的正常高度。
案例二： 假設有一個 <div> 元素并使用了絕對定位，這時其他元素可能會覆蓋在該元素上方。

HTML 代碼：

<div class="box">內容</div>

CSS 代碼：

.box {
position: absolute;
top: 50px;
left: 100px;
}

在這段代碼中，使用了絕對定位將元素定位到了 (100px, 50px) 的位置。
通過清除 position 可以避免其他元素覆蓋該元素。

CSS 代碼：

.box {
z-index: 1;
}

在這段代碼中，使用 z-index 屬性將元素的堆疊順序提高，使其位于其他元素之上。
以上是兩個案例例子，清除 position 可以解決定位問題，使元素回到正常文檔流中，并避免其他元素的覆蓋。清除 position 的方法有很多種，根據具體情況選擇適合的方法即可。在實際開發中，我們可以根據需求和場景來合理使用清除 position 的技巧，提高頁面的布局質量和可維護性。
：通過清除 position 可以避免元素定位帶來的問題，使元素回到正常文檔流中，保證頁面的布局正確性。清除 position 的方法可以根據具體情況選擇，常見的方法包括使用 ::after 偽元素以及設置 z-index 屬性。掌握清除 position 的技巧能夠提高頁面的布局效果，使開發更加高效準確。