CSS是現代網站開發中不可或缺的技術，而布局則是CSS所掌握的最關鍵的部分之一。下面介紹一些常用的CSS布局模型。

/* 標準流布局 */
div {
display: block;
height: auto;
width: auto;
margin: auto;
padding: 0;
border: 0;
}
/* 浮動布局 */
.float {
float: left;
width: 50%;
}
/* 定位布局 */
.position {
position: absolute;
top: 0;
left: 0;
}
/* 彈性布局 */
.flex {
display: flex;
}
/* 網格布局 */
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 10px;
}

標準流布局是最基本的布局方式，它符合HTML文檔的自然排布方式。而浮動布局則是建立在標準流布局之上的，有利于多欄式布局的實現。定位布局通過設置絕對或相對位置，讓元素脫離文檔流，并可自由定位。彈性布局則是在父容器內對子元素進行靈活排列的方法，最常用的場景是根據不同設備寬度而調整排列方式。最后，網格布局是一種更高級的方法，可以實現復雜的網格式布局，更加靈活和直觀。