什么是高度塌陷？

高度塌陷，設置元素脫離文檔流，那就無法撐開父元素的高度，導致父元素的高度丟失，使得頁面布局發生混亂 ?這就叫高度塌陷。

?如何解決高度塌陷

方法一：

????????將父元素高度固定住（不推薦使用）

方法二：

????????頁面元素中的隱含屬性：Block Formatting Context 即塊格式化上下文，簡稱BFC屬性。當開啟元素的BFC以后，元素會變成一個獨立的布局區域，不會在布局上影響到外面的元素。BFC 可以理解為一個封閉的大箱子，箱子內部的元素不會影響到外部。??

方法三：

????????可以直接在高度塌陷的父元素的最后，添加一個空白的div，由于這個div并沒有浮動，所以他是可以撐開父元素的高度的，然后在對其進行清除浮動，這樣可以通過這個空白的div來撐開父元素的高度，基本沒有副作用。

元素的?BFC屬性

父元素的垂直外邊距不會和子元素重疊 ?(解決父子外邊距重疊的問題)

開啟BFC的元素不會被浮動元素所覆蓋

開啟BFC的元素可以包含浮動的子元素（可解決高度塌陷）

如何開啟元素的?BFC屬性

? 1. 設置元素浮動（不推薦）

? ? ? ? 使用這種方式開啟，雖然可以撐開父元素，但是會導致父元素的寬度丟失，而且使用這種方式也會導致下邊的元素上移，不能解決問題。

? 2. 設置元素為inline-block（不推薦）

? ? ? ? 可以解決問題，但是會導致寬度丟失，不推薦使用這種方式。

? 3. 將元素的overflow設置為一個非visible的值。

? 4. 設置元素絕對定位

? ? ? ?元素也會脫離文檔流，雖然可以撐開父元素，但是會導致父元素的寬度丟失，而且使用這種方式也會導致下邊的元素上移，不能解決問題。

? 5. 推薦方式：將overflow設置為hidden是副作用最小的開啟BFC的方式。

?清除浮動

clear可以用來清除其他浮動元素對當前元素的影響

? ? ? 可選值：

none	默認值，不清除浮動
left	清除左側浮動元素對當前元素的影響
right	清除右側浮動元素對當前元素的影響
both	清除兩側浮動元素對當前元素的影響，清除對他影響最大的那個元素的浮動

原理：

? ? ? 設置了 clear 的元素，通過調整自身來使自己不要和浮動元素排列在一起。類似于給自己加個margin-top。

總結

以上是生活随笔為你收集整理的css样式—高度塌陷的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。