解決高度塌陷的方法

我們在進行頁面布局的時候可以發現元素在脫離文檔流后，就會出現高度塌陷問題。

眾所周知高度塌陷的原因是因為子元素脫離文檔流所造成的父元素塌陷（所謂的高度塌陷就是子元素和父元素不在一個層級，未設置高寬的父元素里面沒有子元素的支撐就會塌陷）會影響頁面布局和美觀性。

以下提出幾點解決方案

首先我們先引出一個概念:Block Fomatting Context，我們稱為塊格式化上下文 簡稱BFC，這是每個元素都具有的一個屬性！

開啟BFC的元素都有以下特點:

1.開啟了BFC的元素與其父元素的垂直外邊距不會發生重疊

2.開啟了BFC的元素會包含其浮動的子元素*

3.開啟了BFC的元素不會被浮動元素所覆蓋

那么如何開啟BFC呢？

1.display:inline-block

-這種方式雖然能夠撐開父元素，且下面元素布局不會受到影響，但是會使父元素寬度丟失。


2.設置元素浮動

-這種方式雖然能夠撐開父元素，但會使父元素寬度丟失，且下面所有元素的布局也會向上挪動，影響布局

3.overflow:hidden

-副作用最小的開啟BFC的方式

4.overflow在ie瀏覽器里面會失效有一個兼容問題可以使用zoom來帶替。zoom后面的值是幾意思就是將元素放大幾倍！適用於ie8以下的瀏覽器