解決高度坍塌問題（二）

咱們瞭解完高度坍塌問題以後，那麼如何去解決高度坍塌問題呢？

解決高度問題的方法一：

解決問題的原理：根據W3C標準，元素都有一個隱含的屬性（Block Formatting Context）簡稱BFC,塊級格式化環境，該屬性能夠設置打開或是關閉，當開啓BFC後，元素將會具備以下特性：

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

2.開啓BFC的元素不會被浮動元素覆蓋。

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

 如何開啓BFC（並無直接開啓BFC的方法，可是在操做的過程當中能夠經過一些間接的元素設置開啓浮動）

1.設置元素浮動

當子元素box1設置了浮動定位的時候，同時也給父元素box也設置浮動定位。結果發現雖然父元素的高度被撐開了，可是若是沒有設置寬度，原有的默認佔據一行的寬度就失效了（寬度變成被子元素撐開的元素了），而box2盒子依舊往上移動了。不推薦使用

 

2.設置元素絕對定位

給父元素設置絕對定位後，原有的默認寬度失效（變成被子元素撐開的寬度了），box2盒子依舊向上移動。不推薦使用

3.設置元素inline-block

子元素box1 保持float:left 的浮動定位，爲父元素box設置display:inline-block變成行內塊元素，box2盒子再也不上移，可是原有的默認寬度失效（變成被子元素撐開的寬度）不推薦使用

 

4.將元素的over-flow（超出部分）設置成一個非visible的值

回憶over-flow屬性的值有visible（默認值）、hidden、scroll、auto。非visible的值有hidden、scroll、auto。

首先嚐試一下把box父元素設置爲 overflow:scroll；寬度被保留了下來，高度也被子元素撐開，box2盒子也沒有趁機上移，頁面佈局也很完美。可是scroll屬性值帶有的滾動條卻很礙眼。嘗試其餘屬性值試試。

設置父元素屬性overflow: auto;效果完美

父元素overflow: hidden;

 

 推薦方式：將overflow設置爲hidden開啓BFC最簡便的方式，解決overflow最簡便的方式就是設置overflow:hidden;

瀏覽器兼容：這樣設置，Chrome瀏覽器支持，Firefox瀏覽器支持，IE瀏覽器IE6版本及如下的瀏覽器不支持這種設置。因此使用這種方式不能兼容IE6及其如下的版本。

在IE6中雖然沒有BFC，可是有另外一隱含屬性hasLayout，若是想開啓hasLayout，直接設置元素zoom爲1便可。（zoom：表示放大，後面跟着放大倍數的數值；zoom：1表示不放大）zoom只在IE瀏覽器中支持，其餘瀏覽器都不支持。

若是下想同時兼容全部版本的瀏覽器能夠兩種方式都寫，既有overflow又有zoom。

---

 

解決高度塌陷結局方法之二

在瞭解這個方法以前，先來簡單回顧一下clear屬性（只能清除兄弟元素的影響，不能清除父元素的影響）

clear清除屬性的取值：

none：不清除浮動；

left：左側不容許出現浮動，清除左側浮動元素對當前元素產生的影響；

right：右側不容許出現浮動，清除右側浮動元素對當前元素產生的影響；

both：清除對元素影響最大的浮動。

清楚了clear屬性清除的用法以後，就能夠運用到解決高度塌陷。

當爲父元素中的子元素設置了向浮動時。爲box1設置向左浮動。就會發現子元素的位置沒變，可是父元素box發生了高度坍塌

 

 

爲box1盒子的兄弟元素box2 設置clear屬性

 

解決高度塌陷方案二：

優勢

能夠直接在高度塌陷的父元素最後添加一個空白的div，因爲這個div並無設置浮動，因此他能夠撐開父元素的高度的。

再對其進行清除浮動（clear），經過這樣能夠經過這個空白的div來撐開父元素的高度。

相比於上面的使用overflow屬性清除浮動，更加建議使用此方案，反作用相對而言更少（基本沒有），並且能夠兼容全部的瀏覽器。

缺點：

由於div屬於HTML元素，HTML屬於結構部分，因此使用這種方式雖然能夠解決問題，可是會在頁面中添加多餘的結構。

假如既不想添加結構，又但願能夠解決高度塌陷問題

解決辦法：經過after僞類，選中box父元素的後邊。

能夠經過after僞類向元素的最後添加一個空白的塊元素，而後對其清除浮動。這樣作和添加div原理同樣，能夠達到一個相同的效果。

並且不會在頁面添加多餘的div（結構），最推薦使用的方式，幾乎沒有反作用。

 

 

---

 

使用clearfix屬性，清除修復。

給box添加一個clearfix的屬性

 設置clearfix屬性值，其中最爲關鍵的三點是：

這是最推薦使用的一種方式。可是在IE6中不支持 :after僞類。若是想在IE6中顯示開啓hasLayout，設置zoom:1。