六种方法实现CSS三栏布局
方法一：浮动+margin
实现方法：左栏向左浮动，右栏向右浮动，中间栏不设宽度，用左右margin来撑开距离。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS三栏布局</title>
<style>
body {
margin: 0;
padding: 0;
}
.left {
width: 200px;
height: 300px;
background-color: #DC698A;
float: left;
}
.right {
width: 300px;
height: 500px;
background-color: #3EACDD;
float: right;
}
.middle {
height: 800px;
background-color: #8CB08B;
margin: 0 300px 0 200px;
}
</style>
</head>
<body>
<div class="left">左栏</div>
<div class="right">右栏</div>
<div class="middle">中间栏</div>
</body>
</html>
注意：该方法在html布局时，要把中间栏放在左栏，右栏的后面，左栏和右栏的顺序不定。这就导致主列所显示的主页面无法率先加载，影响用户体验。
方法二：绝对定位法
实现方法：左栏，右栏绝对定位，分别固定到页面左右两侧，中间栏宽度自适应，用左右margin来撑开距离。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS三栏布局</title>
<style>
body {
margin: 0;
padding: 0;
}
.left {
width: 200px;
height: 300px;
background-color: #DC698A;
position: absolute;
top: 0;
left: 0;
}
.middle {
height: 800px;
background-color: #8CB08B;
margin: 0 300px 0 200px;
}
.right {
width: 300px;
height: 500px;
background-color: #3EACDD;
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div class="left">左栏</div>
<div class="middle">中间栏</div>
<div class="right">右栏</div>
</body>
</html>
方法三：浮动+margin负值法
实现方法：左右两栏宽度固定，中间栏宽度100%，中间栏，左栏，右栏向左浮动，左栏的margin-left设为-100%，右栏的margin-left设为-右栏宽度。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS三栏布局</title>
<style>
body {
margin: 0;
padding: 0;
}
.middle {
width: 100%;
height: 500px;
background-color: #8CB08B;
float: left;
}
.left {
width: 200px;
height: 500px;
background-color: #DC698A;
float: left;
margin-left: -100%;
}
.right {
width: 300px;
height: 500px;
background-color: #3EACDD;
float: left;
margin-left: -300px;
}
</style>
</head>
<body>
<div class="middle">中间栏</div>
<div class="left">左栏</div>
<div class="right">右栏</div>
</body>
</html>
注意：该方法在html布局时，要把中间栏放在第一个，但这种情况会出现左右列覆盖中间列的情况。
方法四：圣杯布局
实现方法：在上一个方法的基础上增加了padding-left，padding-right，position:relative。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS三栏布局</title>
<style>
body {
margin: 0;
padding: 0;
}
.container {
padding-left: 200px;
padding-right: 300px;
}
.middle {
width: 100%;
height: 800px;
background-color: #8CB08B;
float: left;
}
.left {
width: 200px;
height: 500px;
background-color: #DC698A;
float: left;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
width: 300px;
height: 500px;
background-color: #3EACDD;
float: left;
margin-left: -300px;
position: relative;
right: -300px;
}
</style>
</head>
<body>
<div class="container">
<div class="middle">中间栏</div>
<div class="left">左栏</div>
<div class="right">右栏</div>
</div>
</body>
</html>
此方法的优点是主列率先加载，允许任何列是最高的。
方法五：双飞翼布局
实现方法：在第三种方法的基础上为中间列增加一个父div，让这个父div的宽度为100%，float: left，设置中间列的左右边距。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS三栏布局</title>
<style>
body {
margin: 0;
padding: 0;
}
.wrap {
width: 100%;
float: left;
}
.middle {
height: 800px;
background-color: #8CB08B;
margin-left: 200px;
margin-right: 300px;
}
.left {
width: 200px;
height: 500px;
background-color: #DC698A;
float: left;
margin-left: -100%;
}
.right {
width: 300px;
height: 500px;
background-color: #3EACDD;
float: left;
margin-left: -300px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="middle">中间栏</div>
</div>
<div class="left">左栏</div>
<div class="right">右栏</div>
</body>
</html>
此方法优点是率先加载中间列，允许任何列是最高的。
方法六：Flex布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS三栏布局</title>
<style>
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
}
.left {
flex-grow: 1;
height: 200px;
background-color: #DC698A;
}
.middle {
flex-grow: 3;
height: 800px;
background-color: #8CB08B;
}
.right {
flex-grow: 1;
height: 300px;
background-color: #3EACDD;
}
</style>
</head>
<body>
<div class="container">
<div class="left">左栏</div>
<div class="middle">中间栏</div>
<div class="right">右栏</div>
</div>
</body>
</html>
此方法优点：简单高效
认真对待每一天，加油
