6种CSS经典三栏布局的方法

　　三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在开发十分常见，今天小编就带来了6种CSS经典三栏布局的方法，一起来看看吧。更多最新IT资讯尽在金顺软件园http://www.jinshun168.com/

1.float布局

　　最简单的三栏布局就是利用float进行布局。首先来绘制左、右栏：

　　此时可以得到左右两栏分布：

　　接下来再来看中间栏如何处理。我们知道对于float元素，其会脱离文档流，其他盒子也会无视这个元素。(但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。)所以此时只需在container容器内添加一个正常的div，其会无视left和right，撑满整个container，只需再加上margin为left right流出空间即可：

　　优势：简单

　　劣势：中间部分最后加载，内容较多时影响体验

　　2. BFC 规则

　　BFC(块格式化上下文)规则规定：BFC不会和浮动元素重叠。所以如果将main元素设定为BFC元素即可：

　　3. 圣杯布局

　　圣杯布局的核心是左、中、右三栏都通过float进行浮动，然后通过负值margin进行调整。

　　第一步，先来看下基本布局

　　此时看到的效果是：左、右两栏被挤到第二行。这是因为main的宽度为100%。接下来我们通过调整左、右两栏的margin来将左、中、右放在一行中：

　　第二步，将left的margin-left设置为-100%，此时左栏会移动到第一行的首部。然后再将right的margin-left设置为其宽度的负值：-100px，则右栏也会移动到和左、中栏一行中：

　　不过此时还没有大功告成，我们试着在main中加入一些文字：

　　可以看到文字被压住了，接下来就要解决这个问题。

　　第三步，给container一个padding，该padding应该正好等于左、右栏的宽度：

　　此时看到的结果是左、中、右三栏都整体收缩了，但文字依然被压住了。

　　第四步，给左、右两栏加上相对布局，然后再通过设置left和right值向外移动：

　　到此为止，大功告成：

    金顺软件园小编推荐：

    css3 border-radius有什么属性

    TexturePacker怎么一键生成CSS sprites

以上，就是金顺软件园小编给大家带来的6种CSS经典三栏布局的方法全部内容，希望对大家有所帮助！