CSS布局是網站設計中非常重要的一部分，它決定了網站的外觀和行為。在本文中，我們將討論四種常用的CSS布局。

1. 流動布局

.container{
width: 100%;
}
.box{
width: 25%;
float: left;
}

流動布局是一種基礎的布局方式，它允許元素沿著頁面流動。在這個例子中，我們將一個包含四個盒子的容器設為100%寬度，然后將每個盒子的寬度設置為25%，并使用float屬性向左浮動。

2. 定位布局

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

定位布局通過使用絕對和相對定位來控制元素的位置。在這個例子中，我們將容器設為相對定位，然后將盒子設為絕對定位并使用top，left和transform屬性將其放置在容器的中央。

3. 網格布局

.container{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
}
.box{
background-color: #ccc;
}

網格布局通過將容器設為網格容器，然后在其中定義行和列，來實現元素的布局。在這個例子中，我們將容器設為網格容器，然后定義三列和兩行，并為盒子添加背景顏色。

4. 彈性盒子布局

.container{
display: flex;
justify-content: space-between;
}
.box{
width: 25%;
background-color: #ccc;
}

彈性盒子布局是一種現代的布局方式，它通過使用flex屬性來控制元素的布局。在這個例子中，我們將容器設為flex容器，并使用justify-content屬性將盒子均勻地分散在容器中。