用css样式围剿等高列问题（转载）

明修栈道暗度陈仓

该秘籍的心法只有十二个字：”隐藏容器溢出，正负内外边距。”看完下面的几行代码，再看这句话你真的可以看到圣光！

隐藏容器溢出。将外层容器的溢出设为隐藏：

.container {
    overflow: hidden;
}

这个时候刷新页面是没有效果的，配合下一步才会看见光芒：

.left, .center, .right {
    float: left;
    width: 300px;
    margin: 30px 10px;

    // 为所有的列添加以下两行
    padding-bottom: 500px;
    margin-bottom: -500px;
}

上面就是正负内外边距：将内边距底部设为不可能会用到的一个正高度，同时将外边距底部设为相反数，巧妙地消除了内边距的冗余高度。太棒了，看效果：

布局效果图

理解这种多列等高的方案，有三个要点：为什么设置 padding-bottom？为什么设置 margin-bottom?为什么设置 overflow: hidden?

1. 设置 padding-bottom。设置该属性可以扩大背景色渲染的范围，当背景色足够大时，就为裁剪提供了基本条件。实际上内容区域仍然不等高。
2. 设置 margin-bottom。设置该属性用于消除占据的多余空间，是对上一个属性的弥补性措施。
3. 设置 overflow: hidden;。当内容高度扩充时，容器高度就会扩充，通过为容器设置该属性，本意是裁减容器的多余部分，实际上裁剪的目标是容器内部的多列，这就是明修栈道暗度陈仓。

使用开发者工具检查时，就可以对此了解一二：

元素审查

就像面说到的，暂时还没有完美的方案。这种方案最大的缺陷在于无法设置底部边框，算是牺牲了 border-botton 属性。这种方案可以满足其他所有的要求，兼容性更是做到了 IE6+: