關于CSS布局模型，大概可以分為四種。他們分別是：浮動布局、盒模型布局、flexbox布局和grid布局。
1. 浮動布局
浮動布局主要是利用float屬性來實現，通過讓元素浮動到左邊或右邊來實現布局。通常用在制作多列布局，可以實現左右布局、左中右布局等效果。但是浮動元素脫離了文檔流，可能會影響其他元素的布局。
代碼示例：

.left {
float: left;
width: 200px;
height: 200px;
}
.right {
float: right;
width: 200px;
height: 200px;
}

2. 盒模型布局
盒模型布局主要是利用display屬性和box-sizing屬性來實現。可以通過設置元素為塊級元素或者行內元素，設置box-sizing為border-box來控制元素的大小。盒模型布局充分考慮了文檔流，不會造成其他元素的影響。
代碼示例：

.box {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
box-sizing: border-box;
border: 1px solid #ccc;
}

3. flexbox布局
flexbox布局是CSS3中新增的一種布局模型，通過設置flex屬性來實現。它可以進行彈性伸縮，可以實現非常靈活的布局。flexbox布局可以將一行或一列元素分成不同的部分，并按照需求分配各自的大小。
代碼示例：

.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flex-item {
flex-basis: 300px;
height: 200px;
margin-bottom: 20px;
}

4. grid布局
grid布局是CSS3中新增的一種網格布局模型。可以非常方便地實現多列和多行的布局。通過設置網格的行和列，可以精細地控制元素的位置和大小。grid布局可以大大提升開發的效率和質量。
代碼示例：

.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 200px 200px;
}
.grid-item {
background-color: #ccc;
}
.grid-item:nth-child(odd) {
background-color: #666;
}

總的來說，不同的布局模型可以解決不同的需求，開發者可以根據實際情況進行選擇和應用。同時，不同的布局模型還可以相互結合使用，更加靈活多變。