三栏布局的页面可分为左中右三部分，然后对中间那部分做自适应的一种布局方式。三栏布局在前端页面的开发中十分常见，那么怎么样的才算是三栏布局呢？比如苏宁易购的首页：
上图的布局就是一个常见的三栏布局：即左边商品导航和右边导航为固定宽度，中间内容随浏览器宽度变化自适应。
下面详细介绍了一些经典及新兴的三栏布局方式，且所有方式显示的效果如下图：
1.绝对定位布局
<!DOCTYPE html>
绝对定位布局是一个比较古老和容易想到的方式，其特点就是简单实用，而且也不容易出问题，缺点就是，容器脱离了文档流，后代元素也脱离了文档流，当高度未知的时候，会有问题，这就导致了这种方法的有效性和可使用性是比较差的。
2.float布局
<!DOCTYPE html>
float布局也是一种较为简单且容易想到的方式，原理是左右模块各自向左右浮动，并设置中间模块的 margin 值使中间模块宽度自适应，缺点就是中间部分最后加载，内容较多时会影响体验。
3.BFC 三栏布局
<!DOCTYPE html>
BFC有一特性：BFC的区域不会与外部浮动元素重叠，这里利用了这一特性，实现了两栏自适应布局。缺点和方法二类似，为了解决这个问题，引出下面要介绍的双飞翼布局。
4.双飞翼布局
<!DOCTYPE html>
双飞翼布局是在中间栏的 div 中再嵌套一个 div，内容写在嵌套的 div 里，然后对嵌套的 div 设置 margin-left 和 margin-right，效果上表现为左右两栏在中间栏的上面，中间栏还是 100% 宽度，只不过中间栏的内容通过 margin 的值显示在中间。
中间内容可以优先加载，但其HTML 代码结构稍微复杂点。
5. 圣杯布局
<!DOCTYPE html>
圣杯布局的核心是左、中、右三栏都通过float进行浮动，然后通过margin负值进行调整。跟双飞翼布局比较像，但还是有一些区别，相对于双飞翼布局来说，其HTML 结构相对简单，但是css语法就稍微复杂，也是优先加载中间内容。
还有注意一点是：中间内容要放在最上面，保证其先渲染。
6. Flex布局
<!DOCTYPE html>
Flex布局是由CSS3提供的一种较为新兴的、方便的三栏布局方式，简单实用，缺点是其兼容性差一点。
7. Table 布局
<!DOCTYPE html>
算是一种比较老的布局方式，较为简单，但其缺点是：无法设置栏间距，缺乏点灵活性。
8. Grid(网格)布局
<!DOCTYPE html>
网格布局作为一种比较新潮的实现方式，仅仅几条样式命令就能完成三栏布局，可见其布局之强大，但其兼容性比较差。
1242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
