CSS是前端開發中必不可少的一部分，它可以用于控制網站的外觀和布局。其中布局是CSS的一個重要應用，這篇文章將介紹CSS布局的一些常見應用。

首先，我們需要了解盒模型（box model）的概念。盒模型將網頁中的每一個元素看做是一個矩形的盒子，包括內容區域、內邊距區域、邊框區域和外邊距區域。通過控制這些區域的大小和樣式，可以實現不同的布局效果。

/* 盒模型示例 */
.example {
width: 300px;  /* 設置盒模型寬度 */
height: 200px; /* 設置盒模型高度 */
padding: 10px; /* 設置內邊距大小 */
border: 1px solid #000; /* 設置邊框樣式 */
margin: 20px; /* 設置外邊距大小 */
}

接下來是常見的布局方法：

1. 浮動布局（float）：通過將元素設為浮動狀態，可以讓它脫離文檔流，不占據常規流中的位置。這種布局方式常用于實現一些簡單的多列布局。

/* 浮動布局示例 */
.container {
width: 800px;
}
.left {
float: left; /* 左側元素浮動 */
width: 200px;
height: 300px;
}
.right {
float: right; /* 右側元素浮動 */
width: 500px;
height: 500px;
}

2. 定位布局（position）：通過將元素設為定位狀態，可以精確地控制它的位置。這種布局方式常用于實現一些需要精確定位的效果（如彈出框）。

/* 定位布局示例 */
.container {
position: relative; /* 設置相對定位 */
width: 800px;
height: 600px;
}
.box {
position: absolute; /* 設置絕對定位 */
left: 200px;
top: 150px;
width: 400px;
height: 300px;
}

3. 彈性布局（flex）：通過設置容器的flex屬性，可以讓它內部的元素實現靈活的彈性布局。這種布局方式常用于實現響應式布局。

/* 彈性布局示例 */
.container {
display: flex; /* 開啟彈性布局 */
flex-wrap: wrap; /* 換行顯示 */
justify-content: center; /* 水平居中對齊 */
align-items: center; /* 垂直居中對齊 */
width: 800px;
height: 600px;
}
.box {
width: 200px;
height: 200px;
margin: 10px;
background-color: #f5f5f5;
}

以上是幾種常見的CSS布局應用，掌握這些布局方法能夠滿足我們實現各種復雜的布局需求。