利用margin-bottom和padding-bottom实现三列等高的原理详解
在网上看到有利用margin-bottom和padding-bottom实现三列等高的例子，但没有解释他的原理，在经过试验以后，终于找到的他的实现原理，有不足之处望指正！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3栏等高实现原理探究</title>
</head>
<body>
<div id="a">
<div id="b">www.ilovebeyond.com |我爱beyond网www.ilovebeyond.com |我爱beyond网www.ilovebeyond.com |我爱beyond网<br/>
www.ilovebeyond.com |我爱beyond网www.ilovebeyond.com |我爱beyond网www.ilovebeyond.com |我爱beyond网www.ilovebeyond.com |我爱beyond网</div>
</div>
</body>
</html>
将css样式分别设置如下，得到的效果图如下所示
<style type="text/css">
* {
margin:0;
padding:0;
}
#a {
margin:50px;
background:green;
}
#b {
background:red;
height:100px;
}
</style>
样式二：
<style type="text/css"> * { margin:0; padding:0; } #a { margin:50px; background:green; } #b { background:red; height:100px; padding-bottom:100px; margin-bottom:-100px; } </style>
样式三：
<style type="text/css">
* {
margin:0;
padding:0;
}
#a {
margin:50px;
background:green;
overflow:hidden;
}
#b {
background:red;
height:100px;
padding-bottom:100px;
margin-bottom:-100px;
}
</style>
从以上三张图片可以看出，当样式表发生变化时，图片的变化仅仅是图片的下部被覆盖（overflow：hidden），而红色部分距离浏览器窗口的距离（为白色，图中未显示）是没有变的，也就
是说图片左上角的位置并未发生变化，由此我们可以推断出，在纯css实现三栏等高的实例中，只要将padding-bottom设置得足够大（？），而margin-bottom的值只要比原来css中三栏中
任意两栏高度的最大差值大（这样的话，margin-bottom：-x就可以将三栏下面不相等的部分集体覆盖掉）即可实现三栏等高！而不是有人解释的padding-bottom:1000px;将三栏
变为等高，而是通过margin-bottom:-1000px和overflow:hidden将他们底部不在一条水平线以下的部分覆盖掉！
