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地址：两栏并列等高布局实验