本文介紹了CSS經(jīng)典三欄布局方案，分享給大家，也給自己做個筆記，具體如下：
三欄布局，顧名思義就是兩邊固定，中間自適應。三欄布局在開發(fā)十分常見
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元素，其會脫離文檔流，其他盒子也會無視這個元素。（但其他盒子內(nèi)的文本依然會為這個元素讓出位置，環(huán)繞在周圍。）所以此時只需在container容器內(nèi)添加一個正常的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>
優(yōu)勢：簡單
劣勢：中間部分最后加載，內(nèi)容較多時影響體驗
2. BFC 規(guī)則
BFC(塊格式化上下文)規(guī)則規(guī)定：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進行調(diào)整。
第一步，先來看下基本布局
<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%。接下來我們通過調(diào)整左、右兩欄的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;
}
【網(wǎng)站聲明】本站除付費源碼經(jīng)過測試外，其他素材未做測試，不保證完整性，網(wǎng)站上部分源碼僅限學習交流，請勿用于商業(yè)用途。如損害你的權(quán)益請聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。