我們了解完高度坍塌問題之后，那么如何去解決高度坍塌問題呢？
解決高度問題的方法一：
解決問題的原理：根據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。