這次帶給大家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>
</p><p></p>
<p></p>
<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 class="right">
<p class="main">
</style>
#優勢：簡單
劣勢：中間部分最後加載，內容較多時影響體驗
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 class="right">
<p class="main">
</style>
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>
<p>
</p><p></p>
<p></p>
<p></p>
此時看到的效果是：左、右兩欄被擠到第二行。這是因為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中加入一些文字：
<p> </p><p>fjlskdjflkasjdfljasdljlsjdljsdjflksadj</p> <p></p> <p></p>
可以看到文字被壓住了，接下來就要解決這個問題。
第三步，給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;
}
到此為止，大功告成：
4. 雙飛翼佈局
雙飛翼佈局的前兩步和聖杯佈局一樣，只是處理中間欄部分內容被遮蔽問題的解決方案有所不同：
既然main部分的內容會被遮擋，那麼就在main內部再加一個content，透過設定其margin來避開遮擋，問題也就可以解決了：
nbsp;html>
<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>
<p>
</p><p></p>
<p></p>
<p></p>
唯一要注意的是，需要在main後面加一個元素來清除浮動。
5. flex佈局
flex佈局是趨勢，利用flex實現三欄佈局也很簡單，不過需要注意瀏覽器相容性：
<style>
.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>
<p>
</p><p>fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj</p>
<p></p>
<p></p>
有幾點要注意一下：
main要首先加载就必须写在第一位，但因为left需要显示在最左侧，所以需要设置left的order为-1
flex属性的完整写法是：flex: flex-grow flex-shrink flex-basis 。这也是flex实现三栏布局的核心，main设置flex-grow为1，说明多余空间全部给main，而空间不够时，仅缩小left right部分，同时因为指定了left right部分的flex-basis，所以指定了两者的宽度，保证其显示效果
6. 绝对定位
绝对定位的方式也比较简单，而且可以优先加载主体：
<style>
.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>
<p>
</p><p>fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj</p>
<p></p>
<p></p>
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是CSS的三欄佈局詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
可掩蓋的圖標：PWA的Android自適應圖標Apr 17, 2025 am 09:13 AM有一個新的Web功能，稱為“蒙版”圖標，即將推出Firefox Preview和其他Web瀏覽器。這種新的圖標格式將使您的PWA在Android上具有自己的自適應圖標。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
禪工作室 13.0.1
強大的PHP整合開發環境
記事本++7.3.1
好用且免費的程式碼編輯器
Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。
WebStorm Mac版
好用的JavaScript開發工具
mPDF
mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），
