問題描述：

在調試代碼，修改一個div的樣式時，發現其高度為0，但是該div卻包括了多個有高度的子元素，仔細想了一下，應該就是遇到了css中所說的高度坍塌問題了；

問題分析：

float: left；元素靠左邊浮動

float: right；元素靠右邊浮動

float: none；元素不浮動

css中出現高度坍塌的原因：子級元素設置了浮動，脫離了文檔流；而父級元素未設置浮動屬性、未設置高度、高度設置為自適應；從而導致父級元素高度為0，出現高度坍塌；

<div class="father"><div class="child1"></div><div class="child2"></div> </div><style>.father {background-color: bisque;}.child1 {width: 100px;height: 200px;background-color: cadetblue;float: left; }.child2 {width: 100px;height: 200px;background-color: darkgreen;float: left;} </style>

問題解決：

方法一：給父級元素設置偽元素樣式 ::after

這是比較常用的清除浮動方法

<style>.father {background-color: bisque;}.father::after {content:'';width:100%;height:0;display:block;overflow:hidden;clear:both;visibility:hidden} </style>

方法二：?在子元素最后添加div元素，設置clear: both屬性

這種清除浮動的方法會增加代碼冗余

<style>.clear {clear: both;} </style><div class="father"><div class="child1"></div><div class="child2"></div><div class="clear"></div> </div>

方法三：?給父元素設置overflow: hidden屬性

overflow: hidden 屬性會觸發BFC塊級格式化上下文規則，浮動元素也參與高度的計算；該方法不僅能解決高度坍塌的問題，而且父元素高度自適應；缺點是子元素超出父元素部分會被隱藏；

<style>.father {background-color: bisque;overflow: hidden;} </style>

方法四：?給父元素設置固定高度，但是不推薦該方法

因為給父元素設置固定高度后，父元素的高度無法自適應

<style>.father {background-color: bisque;height: 100px;} </style>

總結

以上是生活随笔為你收集整理的css中的容器坍塌问题的全部內容，希望文章能夠幫你解決所遇到的問題。

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