这次给大家带来css的经典三栏布局如何实现，实现css的经典三栏布局的注意事项有哪些，下面就是实战案例，一起来看一下。
本文介绍了CSS经典三栏布局方案，分享给大家，也给自己做个笔记，具体如下：
三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在开发十分常见
1. float布局
最简单的三栏布局就是利用float进行布局。首先来绘制左、右栏：
立即学习“前端免费学习笔记（深入）”；
接下来再来看中间栏如何处理。我们知道对于float元素，其会脱离文档流，其他盒子也会无视这个元素。（但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。）所以此时只需在container容器内添加一个正常的div，其会无视left和right，撑满整个container，只需再加上margin为left right流出空间即可：
此时看到的效果是：左、右两栏被挤到第二行。这是因为main的宽度为100%。接下来我们通过调整左、右两栏的margin来将左、中、右放在一行中：
蓝色大气通用企业公司网站源码，这是一款采用经典的三层结构，可以动态、伪静态模式，后台功能实用，界面大气，无限级分类，单篇栏目添加等的企业网站源码，比较适合二次开发或者企业自用，感兴趣的可以下载看一下啊。网站源码完整，后台是我作为程序员多年认为最为好用的一款后台，有时间我将发布更多的模板供大家下载使用，数据库为ACCESS，如需MSSQL数据库可与我联系。功能介绍：【新闻文章管理】可以发布公司新闻和
.left {
float: left;
width: 100px;
height: 200px;
margin-left: -100%;
background-color: red;
}
.right {
float: left;
width: 100px;
height: 200px;
margin-left: -100px;
background-color: yellow;
}第二步，将left的margin-left设置为-100%，此时左栏会移动到第一行的首部。然后再将right的margin-left设置为其宽度的负值：-100px，则右栏也会移动到和左、中栏一行中：
不过此时还没有大功告成，我们试着在main中加入一些文字：
fjlskdjflkasjdfljasdljlsjdljsdjflksadj
可以看到文字被压住了，接下来就要解决这个问题。
第三步，给container一个padding，该padding应该正好等于左、右栏的宽度：
.container {
padding-left: 100px;
padding-right: 100px;
}此时看到的结果是左、中、右三栏都整体收缩了，但文字依然被压住了。
第四步，给左、右两栏加上相对布局，然后再通过设置left和right值向外移动：
.left {
float: left;
width: 100px;
height: 200px;
margin-left: -100%;
position: relative;
left: -100px;
background-color: red;
}
.right {
float: left;
width: 100px;
height: 200px;
margin-left: -100px;
position: relative;
right: -100px;
background-color: yellow;
}到此为止，大功告成：
相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
