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属性将盒子均匀地分散在容器中。