隨著移動設備的廣泛使用，流體布局在網頁設計中變得越來越重要。它可以幫助網頁適應不同的屏幕大小和分辨率，使網站看起來更加美觀和整潔。

.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
box-sizing: border-box;
}

實現流體布局的關鍵在于使用百分比單位和 max-width 屬性。我們可以將父容器的寬度設置為 100% ，同時使用 max-width 屬性限制寬度的最大值。這樣，當瀏覽器窗口變小的時候，子元素的寬度也會跟著縮小。如果我們同時設置了 padding 或 border 屬性，應該使用 box-sizing: border-box; 讓它們不會影響元素的尺寸。

.box {
width: 33.33%;
float: left;
box-sizing: border-box;
padding: 15px;
}

在實現流體布局的時候，通常會將元素的寬度設置為百分比，這樣可以讓它們在不同尺寸的屏幕上自適應。在這個例子中，我們將盒子的寬度設置為 33.33% ，并使用 float 屬性將它們排成一行。為了讓盒子之間保持一定的間距，還可以設置 padding 屬性。當盒子總寬度超過父容器的寬度時，它們會自動換行。

除了使用百分比和 max-width ，還可以使用媒體查詢來對不同的屏幕尺寸應用不同的樣式。例如，我們可以在小屏幕上隱藏某些元素，或者調整字體大小和行高。

@media screen and (max-width: 480px) {
.box {
width: 100%;
float: none;
margin-bottom: 15px;
}
.hidden-xs {
display: none;
}
.text {
font-size: 16px;
line-height: 24px;
}
}

在這個例子中，我們使用 @media 查詢來針對寬度小于 480 像素的屏幕應用樣式。我們將盒子的寬度設置為 100% ，取消了浮動，并添加了一些 margin-bottom 使它們之間有一定的間距。我們還通過 display: none; 將 .hidden-xs 類的元素隱藏了起來。最后，我們調整了 .text 元素的字體大小和行高。

總之，流體布局在響應式網頁設計中扮演著至關重要的角色。它可以幫助網站適應各種設備和屏幕尺寸，并提高用戶體驗。通過使用百分比單位、 max-width 屬性、媒體查詢等技術，我們可以輕松實現流體布局，打造出更加優秀的網頁。