CSS中,父容器高度為0的情況經常出現,可能造成的原因有很多,比如子元素浮動、絕對定位、內部使用了BFC等。
一個常見的情況是子元素浮動。先看下面這段代碼:
<div class="parent"> <div class="child1"></div> <div class="child2"></div> </div>
這里父容器`parent`沒有設置高度,子元素`child1`和`child2`都是100px高。根據常識,如果父容器不設置高度,則會自適應子元素的高度。但我們會發現,這里的父容器高度為0。
原因是子元素使用了浮動,浮動元素會脫離文檔流。因此在父容器看不到子元素,從而不會自適應子元素高度。
解決方法是清除浮動,比如在父容器最后添加一個空的元素,并設置clear樣式:
<div class="parent"> <div class="child1"></div> <div class="child2"></div> <div style="clear: both;"></div> </div>
這樣就可以使父容器自適應子元素高度了。
除了浮動,其他情況下父容器高度為0也需要特別注意。要仔細檢查子元素的樣式,并嘗試設置父容器`overflow: hidden`、`display: table`、`display: flex`等屬性。如果條件允許,也可以考慮使用JavaScript計算并設置父容器高度。