CSS三塊浮動布局是網(wǎng)頁設(shè)計中經(jīng)常使用的一種布局方法。由于浮動特性可以讓元素在文本流中浮動，之后再定位。加上CSS中的樣式制作，可以實現(xiàn)非常靈活的頁面布局。下面是三種實例，讓我們來看一看。

<div class="container">
<div class="left">這是左邊內(nèi)容</div>
<div class="center">這是中間內(nèi)容</div>
<div class="right">這是右邊內(nèi)容</div>
</div>
<style>
.container {
width: 100%;
overflow: hidden;
}
.left {
width: 20%;
float: left;
}
.center {
width: 60%;
float: left;
}
.right {
width: 20%;
float: left;
}
</style>

這個實例中，我們創(chuàng)建了一個小容器，內(nèi)部用三個div塊組成。通過設(shè)置寬度、浮動以及容器的overflow屬性，讓這三個div塊在同一行并且不會出現(xiàn)因容器寬度不夠而換行的情況。

<div class="container">
<div class="left">這是左邊內(nèi)容</div>
<div class="center">這是中間內(nèi)容</div>
<div class="right">這是右邊內(nèi)容</div>
</div>
<style>
.container {
width: 100%;
overflow: hidden;
display: table;
}
.left, .center, .right {
display: table-cell;
vertical-align: top;
}
.left {
width: 20%;
}
.center {
width: 60%;
}
.right {
width: 20%;
}
</style>

這個實例也是用三個div元素實現(xiàn)的，但是我們使用的是CSS中的表格布局方法。將容器的display屬性設(shè)置為table，同時將每個div塊的display屬性設(shè)置為table-cell，就可以實現(xiàn)寬度均分，在一行顯示的效果。如果你習(xí)慣了表格布局的方式，可以選擇嘗試這種方法。

<div class="container">
<div class="left">這是左邊內(nèi)容</div>
<div class="right">這是右邊內(nèi)容</div>
<div class="center">這是中間內(nèi)容</div>
</div>
<style>
.container {
width: 100%;
}
.left {
width: 20%;
float: left;
}
.right {
width: 20%;
float: right;
}
.center {
margin-left: 20%;
margin-right: 20%;
}
</style>

最后一個實例使用了一個與前面兩個不同的方式，左右兩個div塊都浮動，中間的div塊則使用margin設(shè)定左右間距。其中的關(guān)鍵在于左右兩側(cè)的div塊需要分別設(shè)置浮動為left和right才可以達到效果。

以上三種方式都是比較實用的布局方法，可以根據(jù)實際需求選擇適合的。