CSS布局是網頁設計中重要的一環，準確控制頁面元素的位置和尺寸可以幫助網頁呈現更好的效果，其中流動布局尤其重要。

流動布局是指元素的寬度隨著窗口大小的變化而變化，不受固定寬度限制。以下是一個樣例的HTML代碼：

<div id="container">
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>
</div>

為了實現流動布局，我們需要設置容器的樣式，以便讓其中包含的元素能夠自動調整寬度。以下是一個典型的CSS代碼：

#container {
display: flex;
flex-wrap: wrap;
}
.item {
width: 25%;
height: 100px;
box-sizing: border-box;
}

上面的代碼中，我們首先使用了display屬性設置容器為flex布局。這個屬性可以幫助我們將容器中的元素排列在同一行上，并根據需要自動調整寬度。我們還使用了flex-wrap屬性，將它設置為wrap可以幫助我們控制元素換行。

接下來我們為每個元素設置了一個固定的寬度和高度，同時使用了box-sizing屬性，使元素的大小不被border和padding所影響。這樣一來，當窗口大小改變時，元素會自動縮放并調整位置。