在靜態頁面布局中經常會出現高度塌陷的情況，給前端入門的同學造成很大的困擾，那麼造成高度塌陷是有什麼引起的呢。主要就是因為在父元素沒有設定高度（或者高度自適應的情況下），子元素全部脫離文件流，也就是子元素全部浮動，就會發生高度塌陷。
父元素高度塌陷後，父元素以下的元素都會向上移動，導致布局混亂，所以我們要解決高度塌陷的問題。
如下**：
div1
div2
.box
.div1
.div2
.div1
.div2
如何解決高度塌陷？高度塌陷的解決辦法有四種：
一、解決高度塌陷最直接的辦法就是給父元素新增高度
二、觸發bfc
bfc即 block formatting contexts (塊級格式化上下文)， 是 w3c css2.1 規範中的乙個概念。它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關係和相互作用。給父元素新增 overflow：hidden；（溢位隱藏）
缺點：超出父元素的元素會被裁掉，不顯示。在配合有定位的情況容易把超出元素裁掉。不建議使用。
注：ie6及以下的瀏覽器不支援bfc，所以通過觸發bfc來解決高度塌陷不能相容ie6及以下瀏覽器。多加一條宣告 zoom:1;(針對ie6的相容，在不考慮ie6相容的情況下可以不寫)
.box
三、給浮動元素後面新增乙個空標籤（比如span）,並且在該標籤 中新增宣告clear:both; height:0; overflow:hidden;
正常情況下只寫clear：both;即可， height:0; overflow:hidden;這倆條宣告是為了防止上面新增的空標籤是li的時候，在ie6和ie7上有預設高度撐著，用這倆條宣告來解決相容。
div1
div2
.box::after這種方法**較多，可以在公共樣式中新增，方便使用。
高度塌陷及解決方法
一 什麼是高度塌陷 在文件流中，當父元素沒有設定高度的時候，父元素的高度就取決於子元素的高度，也就是常常說的 由子元素撐開 當子元素設定為浮動，脫離了文件流，這時候就會造成父元素的高度塌陷，因為沒有子元素 撐著它的高度 這樣會導致父元素後面的元素往上移，造成布局混亂。二 解決此問題的方法 1.在後面...
高度塌陷解決方法
如果父元素只包含浮動元素，且父元素未設定高度和寬度，那麼它的高度就會塌縮為零，也就是所謂的 高度塌陷 如果父級元素包含背景或者邊框，那麼溢位的元素就不像父級元素的一部分了。解決 高度塌陷 問題的方法 1.浮動父級元素，父級元素的高度就會擴大，直到完全包含它裡面的浮動元素。如果使用這種方法，一定要在該...
高度塌陷的原因及解決方法
子元素可以撐開父元素的高度，但是子元素如果有浮動就不能撐不開父元素的高度 高度塌陷了 什麼情況下會出現高度塌陷，子元素浮動，而父元素沒有高度會出現高度塌陷。解決高度塌陷的方法 方法1 給父元素加overflow hidden 觸發了bfc 缺點 超出的元素會被隱藏。方法2 給需要清浮動的地方加乙個空...