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地址：兩欄並列等高佈局實驗