__x__(29)0908第五天__高度塌陷 問題

高度塌陷

在文檔流中，父元素的高度默認是被子元素撐開的。

可是當爲 子元素 設置 float 時，子元素會徹底脫離文檔流，沒法再撐開父元素，致使父元素高度塌陷。。。以至於佈局混亂

         變成

---

BFC塊級格式化環境

根據 W3C 標準，元素都有一個隱含的屬性 「Block Formatting Context」

該屬性能夠 打開/關閉，默認是「關閉」。

 

當開啓BFC後，元素將具備以下特性：

1. 父元素的垂直外邊距不會和子元素重疊。

2. 不會被浮動元素所覆蓋，會在浮動元素的旁邊顯示。

3. 能夠包含浮動的子元素。

 

只能間接開啓BFC：

1. 設置元素浮動       

雖然高度不塌陷，可是寬度變成適應子元素了，還會影響下面的元素佈局。

 

2. 設置元素絕對定位     

  

3. 設置元素爲inline-block        

雖然高度不塌陷，也不影響下面元素佈局，可是寬度變成適應子元素了。

 

---

 解決方法：

1. 爲父元素指定一個固定的 height       

缺點：父元素的高度沒法再適應子元素高度變化。

2. 將父元素的 overflow 設置爲非visible的值       

缺點：IE6及如下瀏覽器並不支持overflow

即 

father{ overflow: hidden; }

 

3. IE6及如下瀏覽器具備一個 hasLayout 屬性，做用和BFC相似       

zoom: 1;    將放大元素1倍，開啓 hasLayout 反作用最小。。。只有IE瀏覽器支持zoom

father{ overflow: hidden; zoom: 1;
}