CSS的流式布局是一種響應式布局，可以根據不同的屏幕分辨率和設備尺寸自動調整頁面布局和元素大小，以便更好地適應不同的瀏覽器和終端。使用流式布局可以確保頁面在任何屏幕上都能正常顯示，提高了用戶體驗和網站的使用效率。

代碼示例：
/* 設置整個頁面的最大寬度為800像素 */
body {
max-width: 800px;
margin: 0 auto; /* 居中顯示 */
}
/* 定義一個流式的容器，使用百分數設置寬度 */
.container {
width: 100%;
min-height: 500px;
}
/* 設置容器內部的兩個子元素左右浮動 */
.container .left, .container .right {
float: left;
}
/* 使用百分數設置子元素寬度 */
.container .left {
width: 60%;
}
.container .right {
width: 40%;
}
/* 在小屏幕下，將子元素變為垂直排列 */
@media only screen and (max-width: 600px) {
.container .left, .container .right {
float: none;
width: 100%;
}
}

在上面的示例中，我們首先設置了頁面的最大寬度為800像素，這樣可以確保頁面在大屏幕上也不會太寬。然后定義了一個流式容器，并在容器內部放置了兩個子元素，左側占60%寬度，右側占40%寬度，這樣可以在大屏幕上實現兩列布局。

但是在小屏幕下，兩列布局就不太合適了，因為右側的內容可能會被擠到下面。為了解決這個問題，我們使用媒體查詢設定一個小屏幕下的樣式，將兩個子元素的寬度都設為100%，并取消浮動，這樣就可以垂直排列了。這個示例只是流式布局的一種實現方式，實際上可以根據不同的需求和效果來設置布局樣式。