CSS是前端開發中不可缺少的一部分，其中布局是重中之重。本文將介紹常用的CSS布局方式，包括浮動、定位、Flexbox和Grid。 浮動（Float） 浮動是CSS中最早被廣泛使用的布局方式之一，它通過將元素浮動到其父元素的左側或右側來實現布局。 例如，下面的代碼將兩個盒子元素float到左側，它們將位于一行內：

p {
overflow: auto;
}
.box {
float: left;
width: 50%;
height: 300px;
}

這里我們設置了p元素的overflow屬性為auto，這是因為如果其子元素有浮動屬性將會導致其高度塌陷。 定位（Positioning） 定位是另一種常用的CSS布局方式，它使你能夠通過改變元素的位置來進行布局。 例如，下面的代碼將一個盒子元素定位到距離文檔左上角100px的位置：

.box {
position: absolute;
left: 100px;
top: 100px;
width: 200px;
height: 200px;
}

在這里，我們使用position屬性將元素定位，然后使用left和top屬性來定義其位置。 Flexbox布局 Flexbox是一種新的CSS布局方式，它更好地處理了盒子模型的自適應布局。 例如，下面的代碼使用Flexbox在一個容器內布置了三個元素，使它們完美的排列：

.container {
display: flex;
justify-content: space-between;
}
.box {
width: 200px;
height: 200px;
}

在這里，我們使用display屬性將容器變成一個Flexbox容器，然后使用justify-content屬性來控制元素之間的間距，它可以取值包括space-between，space-around等。另外，每個元素都被設定了固定寬高。 Grid布局 Grid布局是一種新的CSS布局方式，它可以通過不同的行和列來組織元素，非常靈活。 例如，下面的代碼演示了使用Grid布局來創建一個4個盒子元素的布局：

.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
.box {
height: 200px;
}

在這里，我們使用display屬性將容器變成一個Grid容器，然后使用grid-template-columns屬性來定義列的數量和大小，使用grid-gap屬性來控制元素之間的間距。每個元素都被設定了固定高度。