网页设计中分栏布局的几种实现方案

在网页设计中，分栏布局是经常使用的布局手法，通常有两栏布局，三栏布局。这其中又以部分栏固定，部分栏自适应的方式最为常见。下面咱们先以常见的三栏布局开始，描述一下经常使用的几种实现方案。

三栏布局

三栏布局最多见的就是左右定宽，中间自适应的方式，咱们就先以这种方案开始讲述。

首先咱们先假设页面的高度固定为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的浮动机制中，当容器中存在一个浮动的元素时，紧随其后的元素的内容，会紧贴该元素的右边框进行排列，若是超出该元素的高度后，则会紧贴父元素的最左边框进行排列（右浮动则相反）。

要解决这个问题，有不少种方案：

1. 给中间的元素增长左右各100像素的padding值，若是使用这种方法，须要本身想办法处理背景的问题：
   
2. 建立BFC，为中间元素创造块格式上下文，最多见的作法就是设置 overflow 为 hidden（也有人用 auto ）：
   

接下来咱们看一下绝对定位布局。