問(wèn)題描述：

在調(diào)試代碼，修改一個(gè)div的樣式時(shí)，發(fā)現(xiàn)其高度為0，但是該div卻包括了多個(gè)有高度的子元素，仔細(xì)想了一下，應(yīng)該就是遇到了css中所說(shuō)的高度坍塌問(wèn)題了；

問(wèn)題分析：

float: left；元素靠左邊浮動(dòng)

float: right；元素靠右邊浮動(dòng)

float: none；元素不浮動(dòng)

css中出現(xiàn)高度坍塌的原因：子級(jí)元素設(shè)置了浮動(dòng)，脫離了文檔流；而父級(jí)元素未設(shè)置浮動(dòng)屬性、未設(shè)置高度、高度設(shè)置為自適應(yīng)；從而導(dǎo)致父級(jí)元素高度為0，出現(xiàn)高度坍塌；

<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>

問(wèn)題解決：

方法一：給父級(jí)元素設(shè)置偽元素樣式 ::after

這是比較常用的清除浮動(dòng)方法

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

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

這種清除浮動(dòng)的方法會(huì)增加代碼冗余

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

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

overflow: hidden 屬性會(huì)觸發(fā)BFC塊級(jí)格式化上下文規(guī)則，浮動(dòng)元素也參與高度的計(jì)算；該方法不僅能解決高度坍塌的問(wèn)題，而且父元素高度自適應(yīng)；缺點(diǎn)是子元素超出父元素部分會(huì)被隱藏；

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

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

因?yàn)榻o父元素設(shè)置固定高度后，父元素的高度無(wú)法自適應(yīng)

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。