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>
<p class="container">
<p class="left"></p>
<p class="right"></p>
<p class="main"></p>
</p>此時可以得到左右兩欄分佈：
接下來再來看中間欄如何處理。我們知道對於float元素，其會脫離文檔流，其他盒子也會無視這個元素。 （但其他盒子內的文本依然會為這個元素讓出位置，環繞在周圍。）所以此時只需在container容器內添加一個正常的p，其會無視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;
}
<p class="container">
<p class="left"></p>
<p class="right"></p>
<p class="main"></p>
</p>
#
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;
}
<p class="container">
<p class="left"></p>
<p class="right"></p>
<p class="main"></p>
</p>#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>
<p class="container">
<p class="main"></p>
<p class="left"></p>
<p class="right"></p>
</p>
</body># 
#
.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;
} 
<body>
<p class="container">
<p class="main">fjlskdjflkasjdfljasdljlsjdljsdjflksadj</p>
<p class="left"></p>
<p class="right"></p>
</p>
</body> 
.container {
padding-left: 100px;
padding-right: 100px;
} 
#
.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;
} 
4. 雙飛翼佈局
#雙飛翼佈局的前兩步和聖杯佈局一樣，只是處理中間欄部分內容被遮擋問題的解決方案有所不同：既然main部分的內容會被遮擋，那麼就在main內部再加一個content，透過設定其margin來避開遮擋，問題也就可以解決了：<!DOCTYPE html>
<html lang="en">
<head>
<style>
.main {
float: left;
width: 100%;
}
.content {
height: 200px;
margin-left: 110px;
margin-right: 220px;
background-color: green;
}
.main::after {
display: block;
content: '';
font-size: 0;
height: 0;
clear: both;
zoom: 1;
}
.left {
float: left;
height: 200px;
width: 100px;
margin-left: -100%;
background-color: red;
}
.right {
width: 200px;
height: 200px;
float: left;
margin-left: -200px;
background-color: blue;
}
</style>
</head>
<body>
<p class="main">
<p class="content"></p>
</p>
<p class="left"></p>
<p class="right"></p>
</body>
</html>5. flex佈局
flex佈局是趨勢，利用flex實現三欄佈局也很簡單，不過需要注意瀏覽器相容性：#
<style type="text/css">
.container {
display: flex;
flex-direction: row;
}
.middle {
height: 200px;
background-color: red;
flex-grow: 1;
}
.left {
height: 200px;
order: -1;
margin-right: 20px;
background-color: yellow;
flex: 0 1 200px;
}
.right {
height: 200px;
margin-left: 20px;
background-color: green;
flex: 0 1 200px;
}
</style>
</head>
<body>
<p class="container">
<p class="middle">fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj</p>
<p class="left"></p>
<p class="right"></p>
</p>
</body>6. 絕對定位
絕對定位的方式也比較簡單，而且可以優先加載主體：
<style type="text/css">
.container {
}
.middle {
position: absolute;
left: 200px;
right: 200px;
height: 300px;
background-color: yellow;
}
.left {
position: absolute;
left: 0px;
width: 200px;
height: 300px;
background-color: red;
}
.right {
position: absolute;
right: 0px;
width: 200px;
background-color: green;
height: 300px;
}
</style>
</head>
<body>
<p class="container">
<p class="middle">fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj</p>
<p class="left"></p>
<p class="right"></p>
</p>
</body>以上內容就收關於六種CSS經典三欄的佈局方案，希望能幫助大家。
相關推薦：
以上是六種CSS經典三欄佈局方案的詳細內容。更多資訊請關注PHP中文網其他相關文章！
