首先什麼是高度塌陷?
當我們需要給頁面設定自適應寬高的時候,在文件流中,父元素的高度預設的情況下是被子元素的高度撐開的,子元素的高度就是父元素的高度,當我們給子元素設定了浮動厚,子元素就會脫離文件流;
當你第一次給父元素設定自適應的時候,又給子元素設定浮動元素的時候,你就會發現,父元素的高度沒有了,這就是子元素無法撐起父元素的高度,從而導致了父元素的高度塌陷.
我們舉例說明一下,首先我們建立乙個父元素巢狀乙個子元素:
給他們加些樣式:
接下來我們看到的結果就是:
可以看出,我們給父元素設定的100%高度,高度自適應.所以子元素200的畫素高,所以父元素也是200畫素高,然後我們給子元素加乙個浮動屬性
這個時候再看看頁面的變化:
可以看到,子元素沒有變,而父元素寬還在,但是高度沒有了.
這就是父元素的高度塌陷,那麼我們怎麼解決這種問題?因為是高度沒有了,那麼我們給父元素乙個高:
效果出來是這樣:
雖然高度有了,但是子元素並沒有在父元素裡面,也就是說自適應的效果沒有了,所以這個辦法是不行的,接下來我們用bfc的顯示原則去解決,由於bfc的區域不會與float box重疊，給父元素新增屬性overflow：hidden;看看效果
可以看到，父元素高度被撐開了，但是如果給子元素裡加上文字
出來的效果就是 可以看到字型被隱藏了，這也是這個方法的弊端。
那麼我們還有別的解決方法嗎，有的：
首先給子元素旁邊加個空標籤
給他清除浮動的屬性
這樣出來的效果也是可以的
他的缺點就是會有很多空標記，增加結構負擔，產生**冗餘；這裡不推薦使用。
其次我們還可以給父元素新增display：table；讓父元素轉換元素型別跟**的特性一樣，**是這樣的
效果如下：
可以看出，也是可以的，但這個方法改變了父元素的元素型別，我也是不推薦的，還有最後乙個辦法，就是萬能清除法，我們需要給父元素加上屬性：
效果如下
這個辦法也是可以的，而且是我本人推薦使用的方法。
接下來我把幾個辦法總結出來：
1、可以給父元素固定高度去解決解決高度塌陷問題，
弊端：但是不能讓元素高度自適應了 。
2、overflow：hidden; 解決高度塌陷並能實現高度自適應
（遵循bfc的顯示原則）
弊端：只要裡面的內容或者元素超出父元素以外，就會被隱藏；
3、在浮動元素的下方新增乙個空元素，並且給他設定屬性
空標記：
clear:both;
弊端：會新增很多空標記，增加結構負擔，產生**冗餘；4、display:table;
給父元素新增display：table；
讓父元素轉換元素型別跟**的特性一樣；
弊端：會改變當前元素的元素型別；
5、萬能清除法：
:after
推薦使用！！
總結來說，當你寫的元素用到了浮動，這個時候你就要考慮自適應的高度會不會顯示出來，這裡就可以用到這幾種方法，希望可以幫到你們。
高度塌陷問題
高度塌陷問題 描述1 如果父元素只包含浮動元素，且父元素未設定高度和寬度，那麼它的高度就會塌縮為零，也就是所謂的 高度塌陷 描述2 在文件流中，父元素的高度預設是被子元素撐開的，也就是子元素多高，父元素就多高。但是當子元素設定浮動之後，子元素會完全脫離文件流，此時將會導致子元素無法撐起父元素的高度，...
如何解決 css高度塌陷問題
今天分享一下我的css筆記，對於一些難點，我都會編輯在筆記docx上，這是我第一天發表的，希望以後我都會繼續分享一些前端的技術難點，供大家一起討論 css高度塌陷問題 提出問題 子元素脫離文件流後，父元素高度會出現塌陷，造成布局混亂 解決問題 根據w3c標準，頁面中元素都有乙個隱含屬性bfc blo...
解決高度塌陷問題
在文件流中，父元素的高度預設是被子元素撐開的 當為子元素設定浮動後，子元素會完全脫離文件流 此時會導致子元素無法撐起父元素的高度，導致父元素的高度塌陷 由於父元素的高度塌陷了，則父元素下的所有元素都會向上移動，導致頁面布局混亂 所以在開發中需要避免出現高度塌陷的問題 如何開啟元素的bfc 1.設定元...