<div>元素是一個塊級元素，當我們對其應用了float屬性后，它的寬度會自動縮小到與內容相同的寬度，這意味著<div>元素會自動適應其內部元素的寬度。然而，有時候我們希望取消<div>元素的float屬性，讓它恢復到默認的塊級元素的寬度。在本文中，我們將詳細討論如何取消<div>元素的float屬性，并給出相應的代碼案例。

取消<div>元素的float屬性可以通過使用clear屬性來實現。clear屬性用于指定元素的右側和左側是否允許浮動元素存在。當一個元素使用了clear屬性后，它將被移動到前面的浮動元素下面，從而取消了浮動的影響。

下面我們將通過幾個代碼案例來詳細解釋如何使用clear屬性來取消<div>元素的float屬性：

案例一：

<div style="float: left; width: 200px; height: 200px; background-color: #f00;">Float left</div>
<div style="clear: both;"></div>

在這個案例中，我們先在第一個<div>元素上設置了float屬性為left，使其向左浮動。接著，在第二個<div>元素上使用clear屬性，并將其值設置為both，這樣第二個<div>元素將會取消第一個<div>元素的浮動效果。結果就是第二個<div>元素會顯示在第一個<div>元素的下面，而不是左側。

案例二：

<div style="float: right; width: 200px; height: 200px; background-color: #00f;">Float right</div>
<div style="clear: right;"></div>

在這個案例中，我們將第一個<div>元素的float屬性設置為right，使其向右浮動。然后，在第二個<div>元素上使用clear屬性，并將其值設置為right，這樣第二個<div>元素就會取消第一個<div>元素的浮動效果。結果就是第二個<div>元素會顯示在第一個<div>元素的下面，而不是右側。

案例三：

<div style="float: left; width: 200px; height: 200px; background-color: #f00;">Float left</div>
<div style="clear: left;"></div>

在這個案例中，我們先將第一個<div>元素的float屬性設置為left，使其向左浮動。然后，在第二個<div>元素上使用clear屬性，并將其值設置為left，這樣第二個<div>元素就會取消第一個<div>元素的浮動效果。結果就是第二個<div>元素會顯示在第一個<div>元素的下面，而不是左側。

通過上述幾個案例，我們可以看到如何使用clear屬性來取消<div>元素的float屬性。根據具體的需要，我們可以根據不同的浮動方向來使用不同的clear值。使用clear屬性，我們可以更好地控制<div>元素的浮動效果，使其滿足我們的布局需求。