html左右两栏高度相同,CSS/两栏并列等高布局

实习的时候在老大那里偶然看到了前端的面试题，于是顺手拿过来做了一做。发现题目也不是很难，于是做完了便沾沾自喜的看别人的简历。

这时，XX哥跟我说，干嘛看别人简历啊？我说题目看完了。然后他就问我题目会不会。我说都会，他就抽出里面的一道题来问我。这个布局(指的是两栏等高布局)怎么写。当时我以为只是浮动过去而已，于是没多想就说这不就是浮动嘛。

然后他问，那怎么等高呢？我当时就混乱了，原来这题是在考浮动等高！我从来没有碰到过这样的布局，在最近的一个项目中我也是通过父元素加背景模拟两边等高，至于如何做到真正的两栏并列等高，我还不知道。于是他跟我说让我去网上搜一搜。这样的布局非常经典，一下就搜出来了：

给两个元素用padding来填充，然后用margin来消除padding带来的影响，最后给父元素加一个overflow:hidden;就行了。

我相信大家一定看了之后都会用。但作为一个专业的前端工程师，我们必须弄明白为什么这样做是可以的呀！我捉摸的许久，在想这样的方法为什么可行。我在 CodePen 中做了如下实验：

1.设margin-bottom:-100px; padding-bottom:100px;设置一个较小的值有利于之后直观的看出这两个属性是如何影响布局的；

2.把父元素的overflow:hidden;去掉。

在我做了这两个事情之后，我发现两个元素的下部padding完全显示出来了，也就是说它们的padding值其实是一样的，只是由于超出父元素被截断了，造成了它们等高的情况。那父元素怎么就恰好在最高的元素的底部截断让两栏等高的呢？我又执行了以下操作：

1.把父元素的overflow:hidden;加上。

2.把最高的(试验中为内容最多)的元素的margin-bottom:-100px;变为margin-bottom:-140px;

这时我发现父元素高度减小了。减小了40px！由此我们可以推测未定高父元素的高度是这么计算的：最高的内容的高度！那父元素的里面都是浮动元素，高度怎么计算呢？这里由于父元素用了overflow:hidden;触发了bfc或者haslayout，所以浮动元素的高度也应该被计算，同时，也把超出父元素的那一部分截掉了。刚好，两栏并列等高布局就出来了！

具体的实践过程中可以把margin-bottom和padding-bottom的值设大一些，要保证任意两栏的高度差不小于你设置的值。

至此，总算把实现两栏等高布局的原理弄懂了。花了不少时间，死了不少脑细胞。这说明不要轻易看别人的简历！血的教训啊！！！

CodePen地址：两栏并列等高布局实验