前端中佈局方式多樣，今天我們淺談一下三欄佈局的幾種實現方式，希望對你有所幫助。
目錄
什麼是三欄佈局？
三欄佈局：整體高度已知，左右兩邊寬度固定，中間內容寬度自適應
三欄佈局常見的實現方式：
- 浮動佈局
- flex佈局
- 絕對定位
- BFC
- table
- 網格（grid）佈局
- 聖盃佈局
- 雙飛翼佈局
廢話不多說，直接上圖，關於三欄佈局情況如下圖所示
1.浮動佈局實現：
HTML代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三欄佈局-8種實現</title>
<link rel="stylesheet/less" href="less/index.less" type="text/css">
</head>
<body>
<!--方式1-浮動佈局-->
<div class="float">
<div class="left">left</div>
<div class="right">right</div>
<div class="main">center</div>
</div>
<script src="js/less.js"></script>
</body>
</html>
CSS代碼（less語法）:
*{
margin: 0;
padding: 0;
}
/*1.浮動佈局*/
.float{
text-align: center;
line-height: 100px;
.left{
width: 100px;
height: 100px;
background-color: #ddd;
float: left;
}
.right{
width: 100px;
height: 100px;
background-color: #ddd;
float: right;
}
.main{
/*不給寬度-自適應*/
height: 100px;
background: #ccc;
}
}
2.flex佈局實現
HTML代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三欄佈局-8種實現</title>
<link rel="stylesheet/less" href="less/index.less" type="text/css">
</head>
<body>
<!--方式2.flex佈局-->
<div class="flexBox">
<div class="left">left</div>
<div class="right">right</div>
<div class="main">center</div>
</div>
<script src="js/less.js"></script>
</body>
</html>
CSS代碼（less語法）:
/*2.flex佈局*/
.flexBox{
display: flex;
text-align: center;
line-height: 100px;
.left{
width: 100px;
height: 100px;
background-color: #ddd;
}
.right{
width: 100px;
height: 100px;
background-color: #ddd;
}
.main{
height: 100px;
background-color: #ccc;
flex:1;
}
}
3.絕對定位實現
HTML代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三欄佈局-8種實現</title>
<link rel="stylesheet/less" href="less/index.less" type="text/css">
</head>
<body>
<!--方式3.絕對定位-->
<div class="position">
<div class="left">left</div>
<div class="right">right</div>
<div class="main">center</div>
</div>
<script src="js/less.js"></script>
</body>
</html>
CSS代碼（less語法）:
/*絕對定位*/
.position{
position: relative;
text-align: center;
line-height: 100px;
.left{
width: 100px;
height: 100px;
background-color: #ddd;
position: absolute;
left: 0;
}
.right{
width: 100px;
height: 100px;
background-color: #ddd;
position: absolute;
right:0;
}
.main{
height: 100px;
background: #ccc;
}
}
4.BFC實現
HTML代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三欄佈局-8種實現</title>
<link rel="stylesheet/less" href="less/index.less" type="text/css">
</head>
<body>
<!--方式4-BFC-->
<div class="BFC">
<div class="left">left</div>
<div class="right">right</div>
<div class="main">center</div>
</div>
<script src="js/less.js"></script>
</body>
</html>
CSS代碼（less語法）:
/*4.BFC方式*/
.BFC{
text-align: center;
line-height: 100px;
.left{
width: 100px;
height: 100px;
background-color: #ddd;
float: left;
}
.right{
width: 100px;
height: 100px;
background-color: #ddd;
float: right;
}
.main{
height: 100px;
background-color: #ccc;
//觸發BFC
overflow: hidden;
}
}
5.table實現：
HTML代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三欄佈局-8種實現</title>
<link rel="stylesheet/less" href="less/index.less" type="text/css">
</head>
<body>
<!--方式5.table-->
<div class="tableBox">
<div class="left">left</div>
<div class="right">right</div>
<div class="main">center</div>
</div>
<script src="js/less.js"></script>
</body>
</html>
CSS代碼（less語法）:
/*5.table*/
.tableBox{
// 要設置父元素寬度
width: 100%;
display: table; // 每一個子元素都要設置display:table-cell
text-align: center;
line-height: 100px;
.left{
width: 100px;
height: 100px;
background-color: #ddd;
display:table-cell;
}
.right{
width: 100px;
height: 100px;
background-color: #ddd;
display:table-cell;
}
.main{
height: 100px;
background-color: #ccc;
display:table-cell;
}
}
6.網格（grid）佈局
HTML代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三欄佈局-8種實現</title>
<link rel="stylesheet/less" href="less/index.less" type="text/css">
</head>
<body>
<!--方式6.網格grid佈局-->
<div class="gridBox">
<div class="left">left</div>
<div class="main">center</div>
<div class="right">right</div>
</div>
<script src="js/less.js"></script>
</body>
</html>
CSS代碼（less語法）:
/*6.網格佈局*/
.gridBox{
// 只需要父元素設置即可
display: grid;
grid-template-rows: 100px;/*設置行高*/
grid-template-columns: 100px auto 100px;/*設置列數屬性*/
text-align: center;
line-height: 100px;
.left{
background-color: #ddd;
}
.right{
background-color: #ddd;
}
.main{
background-color: #ccc;
}
}
7.聖盃佈局
HTML代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三欄佈局-8種實現</title>
<link rel="stylesheet/less" href="less/index.less" type="text/css">
</head>
<body>
<!--方式7.聖盃佈局-->
<div class="hollyCupBox">
<div class="left">left</div>
<div class="main">center</div>
<div class="right">right</div>
</div>
<script src="js/less.js"></script>
</body>
</html>
CSS代碼（less語法）:
/*7.聖盃佈局*/
.hollyCupBox{
// 父元素也需要兩邊空出100px
margin: 0 100px;
text-align: center;
line-height: 100px;
.left{
width: 100px;
height: 100px;
background-color: #ddd;
float: left;
position: relative;
left:-100px;
margin-right:-100%;
}
.right{
width: 100px;
height: 100px;
background-color: #ddd;
float: left;
position: relative;
right: -100px;
margin-left: -100px;
}
.main{
width: 100%;
height: 100px;
background-color: #ccc;
float: left;
}
}
8.雙飛翼佈局
HTML代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三欄佈局-8種實現</title>
<link rel="stylesheet/less" href="less/index.less" type="text/css">
</head>
<body>
<!--8.雙飛翼佈局-->
<div class="doubleFly">
<div class="container">
<div class="main">center</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<script src="js/less.js"></script>
</body>
</html>
CSS代碼（less語法）:
/*8.雙飛翼佈局*/
.doubleFly {
line-height: 100px;
text-align: center;
.container {
width: 100%; // 全都是浮動
float: left;
.main {
// 空出兩邊間隔
margin: 0 100px;
height: 100px;
background-color: #ccc;
}
}
.left {
float: left;
// 關鍵地方，這個100是整個父元素的寬度
margin-left: -100%;
height: 100px;
background-color: #ddd;
width: 100px;
}
.right {
float: right;
// 關鍵地方
margin-left: -100px;
height: 100px;
background-color: #ddd;
width: 100px;
}
}
總結：
1.聖盃佈局、雙飛翼佈局、flex佈局的高度取決於內容區(center部分)，頁面的高度取決於內容區
2.絕對定位的內容區高度取決於兩邊欄的最高點。
3.table-cell佈局能讓三欄的高度一致，但不能優先渲染 center。
4.網格佈局極其強大，但兼容性差
5.浮動：脫離文檔流，需要清除浮動；但兼容性比較好
6.絕對定位：快；但是需要處理下面元素的位置
7.Flex：目前比較完美的方案，特別是移動端
8.思考這些佈局的優缺點？
9.嘗試使用flex+rem佈局