CSS是網(wǎng)頁(yè)開發(fā)中十分重要的一部分，它可以用來修飾、美化網(wǎng)頁(yè)。CSS有很多種布局方式，本文將會(huì)介紹其中的三種。 第一種布局方式：流式布局（Flow Layout）。 流式布局是最基本的布局方式。HTML中的元素的默認(rèn)寬度都是100%。流式布局將元素一個(gè)接一個(gè)地按照文檔流排列，如果頁(yè)面大小改變，元素的尺寸和位置也會(huì)相應(yīng)地改變。在CSS中使用的是display: block或者display: inline的方式進(jìn)行設(shè)置。使用流式布局會(huì)使網(wǎng)頁(yè)具備更好的適應(yīng)性，但是它的缺點(diǎn)也令人無法忍受。當(dāng)頁(yè)面縮放到一定程度，元素的排版將會(huì)無法再減小，導(dǎo)致頁(yè)面失去原有的美觀。例如：

p {
display: block;
}

第二種布局方式：浮動(dòng)布局（Float Layout）。 浮動(dòng)布局利用CSS中的float屬性實(shí)現(xiàn)。它將元素從文檔流中解除，讓元素懸浮在頁(yè)面上，可以通過margin進(jìn)行控制。在浮動(dòng)布局下，頁(yè)面上的元素會(huì)像游動(dòng)在水中的浮萍一樣漂浮著。對(duì)于多列布局，可以使用float將多列元素懸浮在頁(yè)面上。但是，由于浮動(dòng)的元素離開了文檔流，所以我們需要用清除浮動(dòng)的方式清除一下。例如：

p {
float: left;
margin: 10px;
}
.clearboth {
clear: both;
}

第三種布局方式：彈性布局（Flex Layout）。 彈性布局是在CSS3中新增加的一種布局方式，它可以非常方便的實(shí)現(xiàn)等高布局。Flex布局以父容器為基準(zhǔn)，通過設(shè)置一些屬性來決定子容器的寬度和高度。Flex布局可以使子容器按照一定方式進(jìn)行伸縮，從而實(shí)現(xiàn)網(wǎng)頁(yè)的響應(yīng)式布局。例如：

.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flex-item {
flex: 1;
margin: 10px;
}

以上是CSS中的三種常見布局方式，每種布局方式都可以根據(jù)具體的需求靈活運(yùn)用。對(duì)于網(wǎng)頁(yè)設(shè)計(jì)來說，布局的選擇也是非常重要的一個(gè)環(huán)節(jié)。