<div中clear是用于清除浮動元素的屬性，可以解決因為浮動元素脫離文檔流而導致的頁面布局問題。當一個元素被設置為浮動（float: left或float: right）后，其周圍的元素將會圍繞著它。然而，在某些情況下，這可能會造成不希望的效果，例如，當一個父元素包含著浮動元素時，該父元素的高度可能會坍塌為零，導致后續元素出現在不正確的位置上。這時我們可以在父元素中添加clear屬性來清除浮動，恢復正常的布局效果。下面將通過幾個代碼案例詳細解釋clear屬性的用法和效果。

第一個案例中，我們創建一個包含兩個浮動元素的父div，沒有應用clear屬性。如下所示：

div {
border: 1px solid black;
padding: 10px;
}
<br>
.float-left {
float: left;
width: 50%;
height: 100px;
background-color: lightblue;
}
<br>
.float-right {
float: right;
width: 50%;
height: 100px;
background-color: lightgreen;
}

此時，父div的高度將塌陷為零，不包含浮動元素。結果如下圖所示：


接下來，我們為父div添加clear屬性，如下所示：

div {
border: 1px solid black;
padding: 10px;
clear: both;
}

使用clear: both可以清除元素兩側的浮動，使父元素恢復正常高度。此時，父div將包含浮動元素，效果如下圖所示：


第二個案例中，我們將使用一個真實的例子來說明clear屬性的應用場景。

假設我們有一個新聞列表，其中包含多個新聞項（使用div元素表示）。每個新聞項都包括一個標題（h2元素）和一些文本內容（p元素）。我們希望讓每個新聞項按照列的形式排列，每行顯示兩個新聞項。

.news-item {
float: left;
width: 50%;
}
<br>
.news-title {
font-size: 18px;
font-weight: bold;
}
<br>
.news-content {
font-size: 14px;
line-height: 1.5;
}

在上述代碼中，我們將每個新聞項的寬度設置為50%，使其在同一行按列排列。然而，如果新聞項的高度不同，后續元素可能會跟隨在第一行的新聞項下方，導致錯位布局。這時我們可以為新聞項的父元素添加clear屬性，以確保每行只顯示兩個新聞項，并在下一行重新開始顯示：

.news-list {
clear: both;
}

通過添加clear屬性，我們可以按照想要的布局顯示新聞項，有效解決浮動元素造成的布局問題。

綜上所述，通過在div中添加clear屬性，我們可以清除浮動，避免出現布局問題。無論是解決簡單的浮動元素高度塌陷問題，還是實現復雜的多列布局，clear屬性都是一個非常實用的CSS屬性。