CSS布局是網(wǎng)頁設(shè)計中的重要組成部分，常用的布局包括:

1. 浮動布局
2. 定位布局
3. 彈性布局
4. 網(wǎng)格布局

在實際應用中，我們會根據(jù)不同的需求選擇不同的布局方式。

1. 浮動布局

.float-left {
float: left;
width: 50%;
}
.float-right {
float: right;
width: 50%;
}

浮動布局適用于響應式設(shè)計，能夠自動適應不同的屏幕大小。

2. 定位布局

.container {
position: relative;
}
.item {
position: absolute;
top: 0;
left: 0;
}

定位布局適用于需要將元素精確定位在指定位置的情況。

3. 彈性布局

.container {
display: flex;
justify-content: center;
align-items: center;
}
.item {
flex: 1;
text-align: center;
}

彈性布局適用于需要更好的響應式設(shè)計，能夠自動適應不同的屏幕大小，并且使元素在水平和垂直方向上都居中顯示。

4. 網(wǎng)格布局

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

網(wǎng)格布局適用于需要將頁面劃分為網(wǎng)格的情況，并且能夠更好的進行靈活的布局。

綜上所述，根據(jù)不同的需求選擇不同的布局方式是很重要的，同時還要注重實現(xiàn)效果的簡潔性和響應式。