css-經典三欄佈局
學了前端這麼久，還從未認真研究過佈局，一直都是自己設計或者模仿著別人的網頁。這次在網上看了多個部落格，文章。
瞭解常見的三欄佈局，所謂三欄佈局，無非就是左，中，右三欄水平排列。
在這裡的總結主要以程式碼的形式表示出來，還有一些我看到的講解比較好的部落格連結：
float佈局
左右兩邊固定，中間自適應。
.left{
width: 100px;
height: 200px;
background-color: yellow;
float: left;
}
.right{
width: 100px;
height: 200px;
background-color: pink;
float: right;
}
.center{
background-color: red;
height: 200px;
margin-left: 120px; // 據左邊右邊框的距離 整個元素的大小是整個box的寬度
margin-right: 120px;
}
<div 
BFC規則
BFC不會和浮動元素重疊，將center設定為BFC可以使其寬度變為自適應的寬度。
.center{
background-color: red;
height: 200px;
margin-left: 120px;
margin-right: 120px;
overflow: hidden;
}加上overflow: hidden;顯示結果和上面一樣。
聖盃佈局
在頁面的顯示效果：左右兩邊固定寬度，中間容器自適應（根據容器大小自適應）。
實現：左、中、右三欄都通過float進行浮動，然後通過負值margin將左右欄進行調整。最外層設定margin使得中間欄內容不被覆蓋。
（在實際開發中常用來做功能區域的劃分。左邊是一個導航選單，右邊是廣告或者文章的列表，中間是主要的內容顯示區域。）
body{
min-width: 640px; /* 2*220px+200px ？*/
}
.box{
padding: 0 220px 0 200px; //！！
}
.middle{
width: 100%;
height: 200px;
float: left;
background-color: red;
}
.left{
width: 200px;
height: 200px;
float: left;
margin-left: -100%;
position: relative; //！
left: -200px; //！
background-color: yellow;
}
.right{
width: 220px;
height: 200px;
float: left;
margin-left:-220px;
position: relative;
right: -220px;
background-color: pink;
}
<div class="box">
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</div>若有什麼不明白的可以參照一下連結，有詳細的講解：
雙飛翼佈局
實現效果和聖盃模式相同，只是解決中間欄被遮擋問題的方式不同。
既然中間欄部分的內容會被遮擋，那麼就在中間內部再加一個div，通過設定其margin來避開部分遮擋。
body{
min-width: 640px; /* 2*220px+200px */
}
.middle{
width: 100%;
float: left;
}
.box-inner{
margin-left: 200px; //！
margin-right: 220px; //！
height: 200px;
background-color: red;
}
.middle::after { //？middle後面要清除浮動
display: block;
content: '';
font-size: 0;
height: 0;
clear: both;
zoom: 1;
}
.left{
width: 200px;
height: 200px;
float: left;
margin-left: -100%;
background-color: yellow;
}
.right{
width: 220px;
height: 200px;
float: left;
margin-left:-220px;
background-color: pink;
}
<div class="box">
<div class="middle">
<div class="box-inner">
願你半生出走，歸來認識少年。不忘初心，方得始終。
</div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>未處理中間欄的遮擋問題：
下面這篇文章詳細介紹了聖盃佈局 & 雙飛翼佈局兩者之間的區別：
flex佈局
flex佈局現在受到越來越多前端人員的喜愛，所以熟練掌握flex佈局非常重要，在這裡我也有之前所總結的【css-flex佈局】，不瞭解此佈局的小夥伴可以先看一下。
flex: flex-grow flex-shrink flex-basis;
.box{
display:flex;
}
.middle{
height: 200px;
background-color: red;
flex-grow: 1; /*沾滿剩餘空間*/
}
.left{
height: 200px;
order:-1; /*將left放在最前面*/
background-color: yellow;
flex:0 1 200px;
}
.right{
height: 200px;
background-color: pink;
flex:0 1 200px;
}
<body>
<div class="box">
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>絕對定位
<style type="text/css">
.middle {
position: absolute;
left: 200px;
right: 200px;
height: 200px;
background-color: red;
}
.left {
position: absolute;
left: 0px;
width: 200px;
height: 200px;
background-color: yellow;
}
.right {
position: absolute;
right: 0px;
width: 200px;
background-color: pink;
height: 200px;
}
</style>
</head>
<body>
<p class="box">
<p class="middle">
願你半生出走，歸來認識少年。不忘初心，方得始終。
</p>
<p class="left"></p>
<p class="right"></p>
</p>
</body>