說到三欄佈局，常見的有三種：
1. 浮動三欄佈局
2. 絕對定位三欄佈局
3. 彈性三欄佈局
那麼，這三種各有什麼區別及優缺點呢？
1. 浮動：優點：會帶來高度塌陷的問題，需要清除浮動！缺點：兼容性好，簡單！
2. 絕對定位： 優點：方便快捷！缺點：脫離文檔流，會導致子元素也脫離文檔流！
3. 彈性佈局：優點：不會出現以上的問題，完美解決方案！缺點：不兼容IE8及以下的瀏覽器！
接下來，我們展示以下這三種佈局的方案：
1. 浮動佈局：
html:
<div class="left">
<div>左邊欄</div>
</div>
<div class="right">
<div>主區域</div>
</div>
<div class="main">
<div>右邊欄</div>
</div>
css:
.left,
.main,
.right {
height: 600px;
}
.left {
width: 300px;
float: left;
background: lightseagreen;
}
.main {
background: lightsalmon;
}
.right {
width: 300px;
float: right;
background: lightyellow;
}
2. 絕對定位佈局：
html:
<div class="left">
<p>左邊欄</p>
</div>
<div class="main">
<p>主區域</p>
</div>
<div class="right">
<p>右邊欄</p>
</div>
css:
.left,
.main,
.right {
position: absolute;
}
.left {
left: 0;
width: 300px;
background: limegreen;
}
.main {
left: 300px;
right: 300px;
background: mediumorchid;
}
.right {
right: 0;
width: 300px;
background: mediumpurple;
}
3. 彈性佈局：
html:
<div class="box">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
css:
.box {
display: flex;
display: -webkit-flex;
height: 500px;
}
.left {
width: 300px;
background: lightblue;
}
.main {
flex: 1;
background: lightseagreen;
}
.right {
width: 300px;
background: lightcoral;
}
好了，以上就是常見的三種佈局方式啦！！