CSS布局技術是網頁設計中最重要的部分之一。布局的目的是使網頁中的各個元素按照一定的規則進行排布，從而創建出具有良好用戶體驗的網頁。CSS提供了多種布局技術，其中最常用的是流式布局、浮動布局、定位布局和網格布局。以下是這些布局技術的簡介。

/* 流式布局 */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
/* 浮動布局 */
.col {
float: left;
width: 25%;
margin-right: 2%;
}
/* 定位布局 */
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 網格布局 */
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.item {
grid-column: span 1;
grid-row: span 1;
}

流式布局是指頁面的寬度會隨著屏幕的大小而自適應縮放。這種布局方式通過設置容器的寬度為100%來實現。同時為了避免頁面在大屏幕上過于稀疏，在容器的基礎上設置了一個最大寬度。為了讓容器居中，需要將邊距設置為“0 auto”。 浮動布局是指頁面中的元素會沿著左側或右側浮動排布，從而形成一列或多列的布局。通過將元素的“float”屬性設置為“left”或“right”來實現。每個浮動元素的寬度必須小于容器的寬度，同時還需要設置一定的間距。 定位布局是指頁面中的元素可以任意定位，元素的位置是相對于父元素或文檔的。通過將元素的“position”屬性設置為“absolute”或“relative”來實現。通過設置“top”、“right”、“bottom”、“left”這四個屬性可以實現元素的精確定位。 網格布局是最新的布局技術，可以讓頁面中的元素按照網格的形式排布。通過將容器的“display”屬性設置為“grid”來實現。可以使用“grid-template-columns”和“grid-template-rows”屬性來控制網格的列和行。每個元素的位置由“grid-column”和“grid-row”屬性指定。