其实现原理就是给每一列添加相对应用的容器，并进行相互嵌套，并在每个容器中设置背景色。这里需要提醒大家你有多少列就需要多少个容器，比如说我们说的三列，那么你就需要使用三个容器。
以三列布局为例，具体实现如下：
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div>
</div>
</div>
#container3 {
float: left;
width: 100%;
background: green;
overflow: hidden;
position: relative;
}
#container2 {
float: left;
width: 100%;
background: yellow;
position: relative;
right: 30%; /*大小等于col3的宽度*/
}
#container1 {
float: left;
width: 100%;
background: orange;
position: relative;
right: 40%;/*大小等于col2的宽度*/
}
#col1 {
float:left;
width:26%;/*增加了2%的padding，所以宽度减少4%*/
position: relative; l
eft: 72%;/*距左边呀增加2%就成72%*/ overflow: hidden;
}
#col2 {
float:left;
width:36%;/*增加了2%的padding，所以宽度减少4%*/
position: relative; left: 76%;/*距左边有三个padding为2%,所以距离变成76%*/
overflow: hidden;
}
#col3 {
float:left;
width:26%;/*增加了2%的padding，所以宽度减少4%*/
position: relative;
left: 80%;/*距左边5个padding为2%，所以距离变成80%*/
overflow: hidden;
}
实现过程解析：
我们有三列，并且也说过了，这三列内容都放在了三个容器的div中，我们每一列的背景色不是放在内容列中，而是放置在容器中，现在我们需要通过对容器进行相对定位，把背景显示出来，而且我们这个容器是最外层的不能进行相对定位的移动，具体的请看下图：
三列等高布局实现过程
上面我们把容器进行了相对定位，这样一来，我们内容也相应的做了移动，现在我们需要对页面列的内容也进行相对定位，并把内容和容器进行相反方向的定位，这样内容和容器背景色就能对应上了，请看下图所展示的：
三列等高布局实现过程
接下来我们需要把溢出的部分切掉去，和前面一样，在最外面的容器加上
overflow:hidden；这样就OK了。
最后为了让你的效果更加好看一点，你可以尝试给他们加上padding，比如说每列加上2%的padding值，具体实现可以简单从下图中得到：
三列等高布局加padding实现过程
优点：
兼容各浏览器，可以制作流体等高列，无列数限制。
缺点：
标签使用较多，结构过于复杂，不易于理解，不过你掌握了其原理也就不难了，这也不算太大缺点。
