淺談CSS 高度塌陷問題

表現
例如：
HTML：

CSS：

表現為：

產生的原因
由上面的例子可以看出， first盒子沒有設置高度，由子元素撐開，但是由于子盒子設置了浮動，脫離了標準流，所以導致first盒子沒有高度，表現為second和third盒子向上移動了。
可以得出產生高度塌陷的原因：
在文檔流中，父元素的高度默認是被子元素撐開的，也就是子元素多高，父元素就多高。但是當為子元素設置浮動以后，子元素會完全脫離文檔流，此時將會導致子元素無法撐起父元素的高度，導致父元素的高度塌陷。由于父元素的高度塌陷了，則父元素下的所有元素都會向上移動，這樣將會導致頁面布局混亂。
高度塌陷的解決辦法：
1、給父元素設置固定高度。但是使用這種方式后，父元素的高度就不能根據子元素自動撐高了，可以根據自己頁面的特點，如果可以固定高度，可以使用這種方式，否則，不推薦這種方式。
2、額外標簽法，這是w3c推薦的解決方案，但是不推薦，因為html的原則是寫出語義化的標簽，這種方式會額外增加無意義的標簽。

3、父元素的overflow屬性(開啟元素的BFC)：

使用這種方式，屬性值可以是非visible(hidden/auto/scroll)中任意，但是建議用hidden 。
這種方式副作用較小，這種方式在ie6中不支持，可以外加zoom: 1;

4、單偽元素after清除浮動(開啟元素的BFC)：

這種方式現在使用比較廣泛，很多大網站都是使用這種方式，副作用較小，只需要在配合處理ie6就可以了。
5、雙偽元素清除浮動(開啟元素的BFC)：

這種做法寫法比較麻煩，也不推薦。
清除浮動對父元素的影響后的效果：

BFC相關
根據W3C的標準，在頁面中元素都一個隱含的屬性叫做Block Formatting Context，簡稱BFC，該屬性可以設置打開或者關閉，默認是關閉的。
當開啟元素的BFC以后，元素將會具有如下的特性：
1.父元素的垂直外邊距不會和子元素重疊
2.開啟BFC的元素不會被浮動元素所覆蓋
3.開啟BFC的元素可以包含浮動的子元素
【淺談CSS 高度塌陷問題】