CSS是前端開發必不可少的技術之一。在CSS中，布局是至關重要的部分。在本文中，我們將討論三種最常用的布局方案：浮動布局、定位布局和彈性盒子布局。

浮動布局

.content {
float: left;
width: 70%;
}
.sidebar {
float: right;
width: 30%;
}

浮動布局是最常見的布局方式之一。它通過設置元素的浮動屬性來實現對布局的調整。在上面的例子中，我們將兩個元素分別設置為左浮動和右浮動，來創建一個兩欄式的布局。需要注意的是，浮動元素必須手動清除浮動以防止出現不必要的問題。

定位布局

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

定位布局是通過設置元素的定位屬性來實現的。在上面的例子中，我們將.box元素的位置設置為相對于.container元素的位置，然后使用top、left屬性將它放置在容器的中心位置。需要注意的是，定位布局對于響應式布局的支持不是很好。

彈性盒子布局

.container {
display: flex;
justify-content: center;
align-items: center;
}
.item {
width: 100px;
height: 100px;
}

彈性盒子布局是CSS3中引入的布局方式。它通過設置容器的display屬性為flex來創建一個彈性盒子。在上面的例子中，我們將容器的justify-content和align-items屬性都設置為center來使子元素垂直和水平居中。需要注意的是，在使用彈性盒子布局時，我們需要關注瀏覽器的兼容性問題。