400-000-2620 0316-2097660高度塌陷的原因及解決方式
2022年07月13日
訪問量：2039
高度塌陷的原因：
當(dāng)父元素沒有添加高度（高度自適應(yīng)），而子元素又脫離文檔流的時候（當(dāng)子元素設(shè)置了浮動或者子元素的position屬性值為absolute或是fixed，都會脫離文檔流），就會發(fā)生高度塌陷。
高度塌陷的幾種解決方案：
1、給父元素一個固定的高度
缺點：給父元素固定高度違背了高度自適應(yīng)的原則，不夠靈活，當(dāng)不知道父元素的具體高度時沒辦法設(shè)置，不推薦使用。
2、給父元素添加屬性：overflow：hidden
缺點：當(dāng)子元素定位到父元素外的時候，不希望溢出部分隱藏，此方法不適合使用。
3、在最后一個浮動的元素后面添加一個空的div并給該元素添加屬性： clear:both;height:0;overflow：hidden
缺點：在頁面中添加無意義的div，形成冗余代碼。
4、萬能清除浮動法： 在父元素中內(nèi)容的最后添加一個偽元素來實現(xiàn)
父元素選擇符:after{content:".";clear:both;height:0;overflow:hidden;display:block;visibility:hidden;}
最合適的方法推薦使用
【版權(quán)聲明】:本站內(nèi)容來自于與互聯(lián)網(wǎng)(注明原創(chuàng)稿件除外），如文章或圖像侵犯到您的權(quán)益，請及時告知，我們第一時間刪除處理！謝謝！
上一篇：什么是BFC？
下一篇：什么是vue，是做什么的
