<div> 豎向浮動是一種在網頁開發中常用的布局技術。通過使用CSS中的float屬性，我們可以讓元素在垂直方向上按照指定的規則進行浮動。這樣一來，就可以靈活地調整頁面中各個元素的位置和布局，實現更加美觀、動態的網頁設計。

下面通過幾個代碼案例來詳細說明<div> 豎向浮動的應用。

案例一：使用float屬性將兩個<div>元素豎向浮動顯示在一行上。

<div style=\"float: left; width: 50%;\">左側內容</div>
<div style=\"float: left; width: 50%;\">右側內容</div>

在這個案例中，我們將兩個<div>元素的寬度設置為50%，并通過float屬性將它們設置為左浮動。這樣一來，這兩個元素將會并排顯示在一行上，左側內容占據頁面的左半部分，右側內容占據頁面的右半部分。

案例二：使用float屬性實現文字環繞圖片的效果。

<div style=\"float: left; width: 200px; margin-right: 20px;\">
<img src=\"圖片地址\" alt=\"圖片描述\">
</div>
<p>這是左側浮動的圖片，右側的文字將會環繞在圖片周圍顯示。

在這個案例中，我們通過將圖片所在的<div>元素設置為左浮動，并設置一個合適的寬度和右側的外邊距，使得圖片能夠浮動到文本的一側，并且讓文本環繞在圖片周圍顯示。

案例三：使用clear屬性清除浮動。

<div style=\"float: left; width: 50%;\">左側內容</div>
<div style=\"float: left; width: 50%;\">右側內容</div>
<div style=\"clear: both;\"></div>

在這個案例中，我們通過在兩個浮動元素之后添加一個空的、清除浮動的<div>元素，并為它設置clear屬性為both，來確保后續的內容不會被浮動元素影響。這樣一來，就可以避免出現因為浮動元素導致布局錯誤的問題。

通過以上幾個代碼案例，我們可以看到<div> 豎向浮動是一種非常靈活實用的布局技術。它可以幫助我們輕松實現各種布局需求，如多列布局、圖片環繞效果等。然而，需要注意的是，在使用<div> 豎向浮動時，需要仔細控制元素的寬度和高度，并做好清除浮動的處理，以避免布局錯誤和影響到后續內容的顯示。