1. float布局
最簡單的三欄布局就是利用float進(jìn)行布局。首先來繪制左绪颖、右欄：
<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>
此時(shí)可以得到左右兩欄分布：
接下來再來看中間欄如何處理秽荤。我們知道對(duì)于float元素甜奄，其會(huì)脫離文檔流，其他盒子也會(huì)無視這個(gè)元素窃款。（但其他盒子內(nèi)的文本依然會(huì)為這個(gè)元素讓出位置课兄，環(huán)繞在周圍。）所以此時(shí)只需在container容器內(nèi)添加一個(gè)正常的div晨继，其會(huì)無視left和right烟阐，撐滿整個(gè)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)勢(shì)：簡單
- 劣勢(shì)：中間部分最后加載紊扬，內(nèi)容較多時(shí)影響體驗(yàn)
2. BFC 規(guī)則
BFC(塊格式化上下文)規(guī)則規(guī)定：BFC不會(huì)和浮動(dòng)元素重疊蜒茄。所以如果將main元素設(shè)定為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進(jìn)行浮動(dòng)檀葛，然后通過負(fù)值margin進(jìn)行調(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>
此時(shí)看到的效果是：左屿聋、右兩欄被擠到第二行。這是因?yàn)?code>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;
}
第二步象对，將left的margin-left設(shè)置為-100%，此時(shí)左欄會(huì)移動(dòng)到第一行的首部宴抚。然后再將right的margin-left設(shè)置為其寬度的負(fù)值：-100px勒魔，則右欄也會(huì)移動(dòng)到和左、中欄一行中：
不過此時(shí)還沒有大功告成菇曲，我們?cè)囍?code>main中加入一些文字：
<body>
<div class="container">
<div class="main">fjlskdjflkasjdfljasdljlsjdljsdjflksadj</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
可以看到文字被壓住了冠绢，接下來就要解決這個(gè)問題。
第三步常潮，給container一個(gè)padding弟胀，該padding應(yīng)該正好等于左、右欄的寬度：
.container {
padding-left: 100px;
padding-right: 100px;
}
此時(shí)看到的結(jié)果是左喊式、中孵户、右三欄都整體收縮了，但文字依然被壓住了岔留。
第四步夏哭，給左、右兩欄加上相對(duì)布局献联，然后再通過設(shè)置left和right值向外移動(dòng)：
.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. 雙飛翼布局
雙飛翼布局的前兩步和圣杯布局一樣何址，只是處理中間欄部分內(nèi)容被遮擋問題的解決方案有所不同：
既然main部分的內(nèi)容會(huì)被遮擋，那么就在main內(nèi)部再加一個(gè)content进胯，通過設(shè)置其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>
<div class="main">
<div class="content"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
唯一需要注意的是，需要在main后面加一個(gè)元素來清除浮動(dòng)胁镐。
5. flex布局
flex布局是趨勢(shì)偎血，利用flex實(shí)現(xiàn)三欄布局也很簡單，不過需要注意瀏覽器兼容性：
<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>
<div class="container">
<div class="middle">fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
有幾點(diǎn)需要注意一下：
-
main要首先加載就必須寫在第一位盯漂，但因?yàn)?code>left需要顯示在最左側(cè)烁巫，所以需要設(shè)置left的order為-1 -
flex屬性的完整寫法是：flex:flex-growflex-shrinkflex-basis。這也是flex實(shí)現(xiàn)三欄布局的核心宠能，main設(shè)置flex-grow為1，說明多余空間全部給main磁餐，而空間不夠時(shí)违崇，僅縮小leftright部分，同時(shí)因?yàn)橹付?code>leftright部分的flex-basis诊霹，所以指定了兩者的寬度羞延，保證其顯示效果
6. 絕對(duì)定位
絕對(duì)定位的方式也比較簡單，而且可以優(yōu)先加載主體：
<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>
<div class="container">
<div class="middle">fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
