前言

在做頁面時，我們往往會碰到頁面布局相關的內容，面試時也經常會被問到，那么今天我就來總結一下關于頁面布局的內容。

問題：如何實現三欄布局（高度固定，左中右的結構）

假設高度已知，請寫出三欄布局，其中左右寬度均為300px，中間自適應。

看了上面的題目，有經驗的人也許會覺得很簡單，仔細想想，如果我們來寫，能寫出幾種方案呢？一般都會想到兩種吧，float和position定位，其實除了這兩種外，還有3種可以寫，下面我就來一一介紹一下：

方案一（float浮動）

<section class='layout float'>
<style>
.layout.float .left-right-center{
height: 100px;
}
.layout.float .left{
float: left;
width: 300px;
background-color: red;
}
 .layout.float .right{
float: right;
width: 300px;
background-color: blue;
}
 .layout.float .center{
background-color: yellow;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">我是中間的自適應元素--浮動</div>
</article>
</section>

原理：左右兩個div由于浮動脫離了文檔流，center就會上移，造成三欄布局的效果（前提是高度相同）
優點：兼容性高
缺點：需要清除浮動來防止影響其他元素
如果高度不固定，中間的內容會被撐開，左右兩邊不會一起撐開

方案二（絕對定位）

<section class="layout absolute">
<style>
.layout.absolute .left-center-right div{
position: absolute;
height: 100px;
}
 .layout.absolute .left{
left: 0;
width: 300px;
background-color: red;
}
 .layout.absolute .center{
left: 300px;
right: 300px;
background-color: yellow;
}
 .layout.absolute .right{
right: 0;
width: 300px;
background-color: blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
我是中間的自適應元素--絕對定位
</div>
<div class="right"></div>
</article>
</section>

原理：利用絕對定位以及寬度，將左右兩邊的div固定住，中間div的寬度就會有自適應的效果
優點：快捷
缺點：如果父元素脫離了文檔流，子元素一定會脫離文檔流，運用的場景不多
如果中間元素的高度增加，兩邊元素的高度不會增加，所以只有中間的div會撐開