CSS是前端開發中不可或缺的一環，它能夠為頁面增加各種不同的樣式，包括布局?，F在我們將介紹CSS的三種布局模式。

流動布局

流動布局是默認的布局模式，它充分利用瀏覽器的窗口，自動把寬度調整為最適合窗口的大小。這種布局不會有太多限制，因此很容易實現。

body {
width: 100%;
margin: 0;
padding: 0;
}

浮動布局

浮動布局允許我們控制元素的位置和大小，并且可以輕松地實現多欄布局。任何元素都可以浮動，但需要注意不要忘記清除浮動，以免影響下一個元素。

.container {
width: 100%;
}
.box {
float: left;
width: 30%;
margin-right: 5%;
}
.last-box {
margin-right: 0;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}

定位布局

定位布局允許我們控制元素的位置，并且不會受到其他元素的影響。但是，它也容易導致元素出現重疊或覆蓋的問題，需要謹慎使用。

.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

以上就是CSS的三種布局模式，我們可以根據實際需要選擇最適合的布局方式。掌握這些布局模式，可以讓我們更方便地完成我們的工作。