精准传达 • 有效沟通
从品牌网站建设到网络营销策划，从策略到执行的一站式服务
CSS中经典三栏布局方案的示例分析-创新互联
这篇文章主要介绍CSS中经典三栏布局方案的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
创新互联专注于北京网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供北京营销型网站建设，北京网站制作、北京网页设计、北京网站官网定制、
重庆小程序开发服务，打造北京网络公司原创品牌,更为您提供
北京网站排名全网营销落地服务。
1. float布局
最简单的三栏布局就是利用float进行布局。首先来绘制左、右栏：
此时可以得到左右两栏分布：
接下来再来看中间栏如何处理。我们知道对于float元素，其会脱离文档流，其他盒子也会无视这个元素。（但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。）所以此时只需在container容器内添加一个正常的div，其会无视left和right，撑满整个container，只需再加上margin为left right流出空间即可：
此时看到的效果是：左、右两栏被挤到第二行。这是因为main的宽度为100%。接下来我们通过调整左、右两栏的margin来将左、中、右放在一行中：
.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;
}到此为止，大功告成：
4. 双飞翼布局
双飞翼布局的前两步和圣杯布局一样，只是处理中间栏部分内容被遮挡问题的解决方案有所不同：
既然main部分的内容会被遮挡，那么就在main内部再加一个content，通过设置其margin来避开遮挡，问题也就可以解决了：
