在网页设计中，分栏布局是一种常见的布局方式，一般有两栏布局和三栏布局。其中固定部分柱子和适配部分柱子的方法最为常见。下面从常见的三栏式布局说起，介绍几种常用的实现方案。三栏布局最常见的三栏布局就是左右固定宽度，中间自适应的方式。让我们从这个解决方案开始。首先，我们假设页面的高度固定为100像素。让我们快速了解一下这五种布局方案的实现方法。浮动布局https://jsfiddle.net/chenfeng...绝对定位布局https://jsfiddle.net/chenfeng...表格布局https://jsfiddle.net/chenfeng...flex布局https://jsfiddle.net/chenfeng...网格布局https://jsfiddle.net/chenfeng...这些没有高度的布局方案表面上看起来没有问题，但这是当我们假设高度固定的情况下，如果高度不固定，这些布局方案会带来一系列的问题：浮动布局https://jsfiddle.net/chenfeng...因为文章中嵌入了jsfiddle，在预览中看不到问题界面。点击链接后可以看到如下图所示的页面：此时我们可以看到页面的布局是乱七八糟的。或者有“图文混排”效果的同学应该知道这是什么原因。这是因为在CSS的浮动机制中，当容器中有浮动元素时，紧随其后的元素内容会紧贴浮动元素。元素的右边框排列，如果超过元素的高度，将排列在靠近父元素最左边框的位置（右浮动则相反）。要解决这个问题，有很多种方案：在中间元素的左右各增加100像素的padding值。如果使用这种方式，就需要想办法处理后台问题：创建一个BFC，为中间元素创建一个blockformatcontext，最后一个常见的做法是将overflow设置为hidden（有的也使用auto）:接下来我们来看一下绝对定位布局。
