div 流動布局是一種常用的網頁布局方式，通過使用 <div> 元素和 CSS 屬性來實現。它可以根據容器的寬度自動調整子元素的位置和大小，適應不同尺寸的屏幕。下面將通過幾個具體的代碼案例來詳細解釋說明。

案例一：使用 display: inline-block 實現多列布局

<div style="width: 300px;">
<div style="display: inline-block; width: 100px;">Column 1</div>
<div style="display: inline-block; width: 100px;">Column 2</div>
<div style="display: inline-block; width: 100px;">Column 3</div>
</div>

在這個案例中，我們使用 display 屬性將三個 <div> 元素設置為 inline-block。它們會顯示在同一行，并根據寬度進行自動調整。所以在這個例子中，每個列的寬度都是 100px，總寬度為 300px。

案例二：使用 float 實現左右布局

<div style="width: 600px;">
<div style="float: left; width: 200px;">Left Column</div>
<div style="float: right; width: 200px;">Right Column</div>
</div>

在這個案例中，左列和右列都設置了 float 屬性，一個向左浮動，一個向右浮動。這樣它們會分別靠左和靠右顯示，而不會占用整個容器的寬度。所以在這個例子中，容器的寬度為 600px，左列和右列的寬度都是 200px。

案例三：使用 flexbox 實現自適應布局

<div style="display: flex; justify-content: space-between;">
<div>Left Box</div>
<div>Middle Box</div>
<div>Right Box</div>
</div>

在這個案例中，我們使用 display 屬性的 flex 值將 <div> 容器設置為彈性布局。并且使用 justify-content 屬性將三個子元素分散對齊，中間會自動留出空白填滿剩余空間。所以在這個例子中，子元素的寬度是根據內容自適應的，容器的寬度會根據子元素的寬度和空白空間進行調整。

以上是使用 div 流動布局的幾個常見案例，通過使用不同的 CSS 屬性，我們可以實現各種各樣的布局效果。div 流動布局可以幫助我們更好地適應不同屏幕尺寸和瀏覽器窗口大小，提升用戶體驗。