高度塌陷的產生原因及解決方法

當父元素未設定高度

時，所有子元素浮動後，造成

子元素脫離文件流進而無法把父元素撐開，

父元素高度為0

產生高度塌陷

，稱為高度塌陷問題。

父元素高度塌陷後，父元素以下的元素都會向上移動，導致布局混亂，所以我們要解決高度塌陷的問題。

如下**：

當我們讓div1和div浮動之後:

我們可以發現，當子元素全都浮動後，父元素box的高度變為了0只剩下了邊框，這就是box發生了高度塌陷。

優點：簡單。

缺點：只適合固定頁面的布局，

無法進行自適應，不推薦使用。

二、觸發bfc

bfc即 block formatting contexts (塊級格式化上下文)， 是 w3c css2.1 規範中的乙個概念。它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關係和相互作用。

給box新增overflow: hidden;等宣告觸發bfc。

.box

觸發bfc的方法：

根元素；html標籤就是乙個bfc。

float的值不為none

；讓父元素

浮動起來，

這種方式開啟雖然可以

解決父元素

的高度塌陷問題

，但父元素

也會浮動，可能引起其他布局問題。

display的值為inling-block/table-cell/table-caption/flex/inline-flex

；overflow: auto

/hidden

/scroll (不為visible)

position的值為absolute或fixed

；注意：ie6及以下的瀏覽器不支援bfc，

所以通過觸發bfc來解決高度塌陷不能相容ie6及以下瀏覽器

。在ie6中

可以通過設定宣告zoom:1;來觸發haslayout來解決高度塌陷問題。

bfc的使用場景：1. 去除邊距重疊現象

2. 清除浮動（讓父元素的高度包含子浮動元素）

3. 避免某元素被浮動元素覆蓋

4. 避免多列布局由於寬度計算四捨五入而自動換行

.box::after

可以通過增加zoom: 1;宣告來解決。

高度塌陷的原因及解決方法

子元素可以撐開父元素的高度，但是子元素如果有浮動就不能撐不開父元素的高度 高度塌陷了 什麼情況下會出現高度塌陷，子元素浮動，而父元素沒有高度會出現高度塌陷。解決高度塌陷的方法 方法1 給父元素加overflow hidden 觸發了bfc 缺點 超出的元素會被隱藏。方法2 給需要清浮動的地方加乙個空...

高度塌陷及解決方法

一 什麼是高度塌陷 在文件流中，當父元素沒有設定高度的時候，父元素的高度就取決於子元素的高度，也就是常常說的 由子元素撐開 當子元素設定為浮動，脫離了文件流，這時候就會造成父元素的高度塌陷，因為沒有子元素 撐著它的高度 這樣會導致父元素後面的元素往上移，造成布局混亂。二 解決此問題的方法 1.在後面...

Html中產生塌陷的原因及解決方法

產生塌陷的原因 由於沒有給父元素設定寬高，想通過子元素撐開寬高時，子元素又脫離了文件流使得子元素無法撐開文件流 脫離文件流的三種情況 1 float 給子元素設定浮動 2 position absolute 絕對定位 3 position fixed 相對於瀏覽器視窗定位 解決塌陷的問題 1 在浮動...