站長(zhǎng)資訊網(wǎng)在文檔流中，父元素的高度默認(rèn)是被子元素?fù)伍_(kāi)的，也就是子元素多高，父元素就多高。但是當(dāng)子元素設(shè)置浮動(dòng)之后，子元素會(huì)完全脫離文檔流，此時(shí)將會(huì)導(dǎo)致子元素?zé)o法撐起父元素的高度，導(dǎo)致父元素的高度塌陷。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3版、Dell G3電腦。
如果父元素只包含浮動(dòng)元素，且父元素未設(shè)置高度和寬度，那么它的高度就會(huì)塌縮為零，也就是所謂的“高度塌陷”。
如果父級(jí)元素包含背景或者邊框，那么溢出的元素就不像父級(jí)元素的一部分了。
解決“高度塌陷”問(wèn)題的方法：
方案一：給父元素一個(gè)固定的高度
缺點(diǎn)：給父元素固定高度違背了高度自適應(yīng)的原則，不夠靈活，不推薦使用。
方案二：給父元素添加屬性 overflow: hidden;
優(yōu)點(diǎn)：瀏覽器支持好，簡(jiǎn)單；
缺點(diǎn)：當(dāng)子元素有定位屬性時(shí)，設(shè)置 overflow: hidden; 容器以外的部分會(huì)被裁剪掉。
【推薦教程：CSS視頻教程 】
方案三：在子元素的末尾添加一個(gè)空的 p ，并設(shè)置下方樣式
div{ clear: both; height: 0; overflow: hidden; }
優(yōu)點(diǎn)：所有瀏覽器都支持，并且容器溢出不會(huì)被裁剪；
缺點(diǎn)：在頁(yè)面中添加無(wú)意義的div，容易造成代碼冗余。
方案四：萬(wàn)能清除浮動(dòng)法
在父元素中內(nèi)容的最后添加一個(gè)偽元素來(lái)實(shí)現(xiàn)第三種方案的功能，具體設(shè)置樣式如下：
父元素:
after{ content: ""; height: 0; clear: both; display: block; }
優(yōu)點(diǎn)：不會(huì)造成代碼冗余，剩余代碼性能優(yōu)化，推薦使用。
