在網頁中，頁面布局方式是非常重要的。CSS提供了不同的布局方式，以便開發人員可以根據需要選擇適合的布局方式。在這篇文章中，我們將討論CSS中的幾種常見的布局方式。

/**
 * Flex布局
 */
.container {
display: flex;
justify-content: center;
align-items: center;
}
/**
 * Grid布局
 */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 50px 50px;
}
/**
 * 浮動布局
 */
.container {
overflow: hidden; /* 清除浮動 */
}
.item {
float: left;
width: 33.33%;
}
/**
 * 定位布局
 */
.container {
position: relative;
}
.item {
position: absolute;
top: 0;
left: 0;
}

第一種常見的布局方式是Flex布局。Flex布局是CSS3中新增的一種布局方式，它可以讓開發者更方便地布局頁面元素。使用Flex布局，可以通過設置容器的display屬性為flex來定義容器內的子元素排列方式。

第二種常見的布局方式是Grid布局。Grid布局是CSS3中另一種新增的布局方式。它可以讓開發人員更方便地控制頁面中的復雜布局。使用Grid布局，可以通過設置容器的display屬性為grid來定義容器內的子元素排列方式。

第三種常見的布局方式是浮動布局。浮動布局是CSS中最常用的布局方式之一。通過給元素設置float屬性為left或right，可以使元素向左或向右浮動。在使用浮動布局時，需要注意清除浮動以避免布局混亂。

第四種常見的布局方式是定位布局。定位布局是CSS中另一種常用的布局方式。通過設置元素的position屬性為absolute或fixed，可以將元素定位在父元素或瀏覽器窗口的任意位置。然后可以使用top、bottom、left和right屬性指定位置。