高度塌陷的原因及解決方式

高度塌陷的原因：

當(dāng)父元素沒有添加高度（高度自適應(yīng)），而子元素又脫離文檔流的時(shí)候（當(dāng)子元素設(shè)置了浮動或者子元素的position屬性值為absolute或是fixed，都會脫離文檔流），就會發(fā)生高度塌陷。

高度塌陷的幾種解決方案：

1、給父元素一個(gè)固定的高度

缺點(diǎn)：給父元素固定高度違背了高度自適應(yīng)的原則，不夠靈活，當(dāng)不知道父元素的具體高度時(shí)沒辦法設(shè)置，不推薦使用。

2、給父元素添加屬性：overflow：hidden

 缺點(diǎn)：當(dāng)子元素定位到父元素外的時(shí)候，不希望溢出部分隱藏，此方法不適合使用。

3、在最后一個(gè)浮動的元素后面添加一個(gè)空的div并給該元素添加屬性：        clear:both;height:0;overflow：hidden

缺點(diǎn)：在頁面中添加無意義的div，形成冗余代碼。

4、萬能清除浮動法： 在父元素中內(nèi)容的最后添加一個(gè)偽元素來實(shí)現(xiàn)

父元素選擇符:after{content:".";clear:both;height:0;overflow:hidden;display:block;visibility:hidden;}

最合適的方法推薦使用