在文檔流中，父元素的高度默認(rèn)是被子元素?fù)伍_的，也就是子元素多高，父元素就多高。但是當(dāng)子元素設(shè)置浮動之后，子元素會完全脫離文檔流，此時(shí)將會導(dǎo)致子元素?zé)o法撐起父元素的高度，導(dǎo)致父元素的高度塌陷。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3版、Dell G3電腦。

如果父元素只包含浮動元素，且父元素未設(shè)置高度和寬度，那么它的高度就會塌縮為零，也就是所謂的“高度塌陷”。

如果父級元素包含背景或者邊框，那么溢出的元素就不像父級元素的一部分了。

解決“高度塌陷”問題的方法：

方案一：給父元素一個(gè)固定的高度

缺點(diǎn)：給父元素固定高度違背了高度自適應(yīng)的原則，不夠靈活，不推薦使用。

方案二：給父元素添加屬性 overflow: hidden;

優(yōu)點(diǎn)：瀏覽器支持好，簡單；

缺點(diǎn)：當(dāng)子元素有定位屬性時(shí)，設(shè)置 overflow: hidden; 容器以外的部分會被裁剪掉。

【推薦教程：CSS視頻教程 】

方案三：在子元素的末尾添加一個(gè)空的 p ，并設(shè)置下方樣式

div{ clear: both; height: 0; overflow: hidden; }

優(yōu)點(diǎn)：所有瀏覽器都支持，并且容器溢出不會被裁剪；
缺點(diǎn)：在頁面中添加無意義的div，容易造成代碼冗余。

方案四：萬能清除浮動法

在父元素中內(nèi)容的最后添加一個(gè)偽元素來實(shí)現(xiàn)第三種方案的功能，具體設(shè)置樣式如下：

父元素:

after{ content: ""; height: 0;     clear: both; display: block; }

優(yōu)點(diǎn)：不會造成代碼冗余，剩余代碼性能優(yōu)化，推薦使用。