说到三栏布局，常见的有三种：
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;
}
好了，以上就是常见的三种布局方式啦！！