這次帶給大家CSS的經典三欄佈局如何實現，實現CSS的經典三欄佈局的注意事項有哪些，下面就是實戰案例，一起來看一下。
本文介紹了CSS經典三欄佈局方案，分享給大家，也給自己做個筆記，具體如下：
三欄佈局，顧名思義就是兩邊固定，中間自適應。三欄佈局在開發十分常見
1. float佈局
最簡單的三欄佈局就是利用float進行佈局。首先來繪製左、右欄：
<style>
.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right {
float: right;
width: 100px;
height: 200px;
background-color: yellow;
}
</style>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>登入後複製
接下來再來看中間欄如何處理。我們知道對於float元素，其會脫離文檔流，其他盒子也會無視這個元素。 （但其他盒子內的文本依然會為這個元素讓出位置，環繞在周圍。）所以此時只需在container容器內添加一個正常的div，其會無視left和right，撐滿整個container，只需再加上margin為left right流出空間即可：
<style>
.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right {
float: right;
width: 100px;
height: 200px;
background-color: yellow;
}
.main {
background-color: green;
height: 200px;
margin-left: 120px;
margin-right: 120px;
}
.container {
border: 1px solid black;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>登入後複製
優勢：簡單
劣勢：中間部分最後加載，內容較多時影響體驗
2. BFC 規則
BFC(區塊格式化上下文)規則規定：BFC不會和浮動元素重疊。所以如果將main元素設定為BFC元素即可：
<style>
.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right {
float: right;
width: 100px;
height: 200px;
background-color: yellow;
}
.main {
background-color: green;
height: 200px;
overflow: hidden;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>登入後複製
3. 聖杯佈局
聖杯佈局的核心是左、中、右三欄都透過float進行浮動，然後透過負值margin進行調整。
第一步，先來看下基本佈局
<style>
.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right {
float: left;
width: 100px;
height: 200px;
background-color: yellow;
}
.main {
float: left;
width: 100%;
height: 200px;
background-color: blue;
}
</style>
<body>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>登入後複製
此時看到的效果是：左、右兩欄被擠到第二行。這是因為main的寬度為100%。接下來我們透過調整左、右兩欄的margin來將左、中、右放在一行中：
.left {
float: left;
width: 100px;
height: 200px;
margin-left: -100%;
background-color: red;
}
.right {
float: left;
width: 100px;
height: 200px;
margin-left: -100px;
background-color: yellow;
}登入後複製
第二步，將left的margin-left設定為-100%，此時左欄會移動到第一行的首部。然後再將right的margin-left設定為其寬度的負值：-100px，則右欄也會移動到和左、中欄一行中：
不過此時還沒有大功告成，我們試著在main中加入一些文字：
<body>
<div class="container">
<div class="main">fjlskdjflkasjdfljasdljlsjdljsdjflksadj</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>登入後複製
可以看到文字被壓住了，接下來就要解決這個問題。
第三步，給container一個padding，padding應該剛好等於左、右欄的寬度：
.container {
padding-left: 100px;
padding-right: 100px;
}登入後複製
此時看到的結果是左、中、右三欄都整體收縮了，但文字依然被壓住了。
第四步，給左、右兩欄加上相對佈局，然後再透過設定left和right值向外移動：
.left {
float: left;
width: 100px;
height: 200px;
margin-left: -100%;
position: relative;
left: -100px;
background-color: red;
}
.right {
float: left;
width: 100px;
height: 200px;
margin-left: -100px;
position: relative;
right: -100px;
background-color: yellow;
}登入後複製
到此為止，大功告成：
相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
html5怎麼做出圖片轉圈的動畫效果
在h5裡手機端頁面縮放應該如何實作
怎麼用H5 Canvas實作3D動態Chart圖表
H5的FileReader分佈讀取檔案應該如何使用以及其方法簡介
以上是CSS的經典三欄佈局如何實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！
