今天下午的空上了會兒網(wǎng)，看到一個帖子咨詢網(wǎng)頁布局的事情，帖子內(nèi)容大概就是說自己的兩個塊級容器放到一個父容器里，為什么父容器底下的另一個容器會上升并占用父容器的部分位置，根據(jù)他的描述應(yīng)該是這樣一個結(jié)果。

子容器1和2都在父容器里面，底部容器卻占用了父容器部分位置

這種情況經(jīng)常做布局的童鞋一看就知道問題出在哪兒，肯定是子容器1和2不占位，并且父容器沒有設(shè)置固定高度因此底部容器才會靠到父容器中文字的下方，要解決這個問題，把父容器高度固定死了是最簡單的辦法，但是在實際使用中，如果父容器不允許設(shè)定固定高度，這個問題還有更好的解決辦法么？

大家知道如果把容器的overflow設(shè)置為hidden容器會將超出的內(nèi)容隱藏掉，這是針對父容器高度寬度固定的情況下的設(shè)定，如果高度沒有設(shè)定或者高度只設(shè)定了最小高度，情況會怎樣呢，我們現(xiàn)在將父容器的overflow設(shè)為hidden看看。

底部容器下去了，沒有錯，由于子容器1和2使用了float屬性導(dǎo)致不占位，但是父容器overflow為hidden高度未設(shè)定，父容器不知道多少高度外需要隱藏，因此自動擴展到了字容器1和2的下方，如果子容器1和2高度不一樣，父容器會選擇最高的那個子容器的底部對齊。

另外需要注意的是，塊元素（div、p、ul等）如果不設(shè)定寬度，他們默認是跟父容器寬度一致的，并且塊元素前后帶有換行符。這里的兩個字容器之所以在一行是因為字容器1和2各占父容器50%并且使用了float：left屬性，如果1和2有border（邊框）或者設(shè)置了padding（內(nèi)邊距）、margin（外邊距）我們還得考慮這三個設(shè)置的占位。

實際布局中的問題遠比這個例子復(fù)雜，因為頁面容器中還有浮動塊元素，絕對定位塊，行內(nèi)塊，內(nèi)聯(lián)元素等。這需要我們在平時一一搞清不同元素的占位原理，這樣無論多復(fù)雜的布局，我們都能信手拈來。