???????正是因為這種浮動的這種特性，所以本該屬于普通流中的元素浮動之后，父級元素的高度就可能會發生變化(父級元素內部由于不存在其他普通流元素了，其高度就為0)，在實際應用中，會嚴重影響整體的布局。
所以我們需要使用清除浮動和閉合浮動來處理浮動帶來的問題
????????清除浮動：對被影響文檔位置的塊級元素添加屬性clear：left | right | both | none;使其下移，直到元素兩邊沒有浮動元素。指使用clear阻止這個元素盒子的邊和前面的浮動元素相鄰的行為；
????????閉合浮動：是使浮動元素閉合，使父元素高度不再塌陷，高度被撐開了，使父元素能夠包圍浮動元素，從而減少浮動帶來的影響。指避免float無法撐高父容器的默認行為
這是兩者之間的區別：
閉合浮動的方法
1、添加額外的元素
main：wrap自己閉合浮動了，所以footer不用再清除浮動了(float:left) side：我也浮動了(float:left) footer：這次wrap人品爆發了, 通過在末尾添加了一個空標簽，已經閉合浮動了優點：簡單，代碼少，瀏覽器支持好，不容易出現怪問題
缺點：初學者不理解原理；如果頁面浮動布局多，就要增加很多空div，代碼語義化變差
原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度
2、使用偽類元素：新增.parent:after偽對象，其余不變
優點：瀏覽器支持好，不容易出現怪問題
.warp:after{ content: ".";/*生成一個元素內容為"."，為" "時也好用*/ display: block;/*讓元素為塊級元素*/ height: 0;/*用以下兩種方式讓元素不渲染*/ visibility: hidden; clear: both;/*清除浮動*/ }3、父元素設置overflow:hidden?
.wrap{ margin:0 auto; width: 500px; border: 2px solid #EA2C0A; padding: 10px; overflow: hidden;/*新增*/ zoom:1;/*新增，針對IE6，但沒有經過測試*/???}//第二種，在parent容器中添加overflow：auto的屬性，并針對于IE6增加zoom:1的屬性。優點：不存在結構和語義化問題，代碼量極少。
缺點：內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素。
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度。
4、父元素也設置浮動
????????只需給parent容器添加 float：left，也可閉合浮動。
?優點：代碼少
?缺點：會導致整個頁面大部分都處于浮動狀態，頁面布局容易出現問題
????????當然方法還有很多比如：display:table;改變盒模型屬性。還有給父級元素添加position:absolute定位等方法。
說到底閉合浮動或者清楚浮動的原理主要就是這么兩個原理：
通過在浮動元素的末尾添加一個空元素，設置 clear：both屬性，after偽元素其實也是通過 content 在元素的后面生成了內容為一個點的塊級元素；
通過設置父元素 overflow 或者display：table 屬性等來閉合浮動，其實這是觸發了Block formatting contexts (塊級格式化上下文，簡稱 BFC)。塊級格式化上下文是CSS可視化渲染的一部分。它是一塊區域，規定了內部塊盒的渲染方式，以及浮動相互之間的影響關系。
塊格式化上下文(BFC)有下面幾個特點：
???????BFC就像一道屏障，隔離出了BFC內部和外部，內部和外部區域的渲染相互之間不影響。BFC有自己的一套內部子元素渲染的規則，不影響外部渲染，也不受外部渲染影響。
???????BFC的區域不會和外部浮動盒子的外邊距區域發生疊加。也就是說，外部任何浮動元素區域和BFC區域是涇渭分明的，不可能重疊。
???????BFC在計算高度的時候，內部浮動元素的高度也要計算在內。也就是說，即使BFC區域內只有一個浮動元素，BFC的高度也不會發生塌縮，高度是大于等于浮動元素的高度的。
???????HTML結構中，當構建BFC區域的元素緊接著一個浮動盒子時，即，是該浮動盒子的兄弟節點，BFC區域會首先嘗試在浮動盒子的旁邊渲染，但若寬度不夠，就在浮動元素的下方渲染。
現在我們再來分析一下overflow清除浮動的原理：
??????當元素設置了overflow樣式，且值不為visible時，該元素就建構了一個BFC。.warp因設置了值為auto的overflow樣式，所以該元素建構出一個BFC，按照上面第三個特點，BFC的高度是要包括浮動元素的，所以.warp的高度被撐起來，達到了清除浮動影響的目的。overflow的作用就是為了構建一個BFC區域，讓內部浮動的影響都得以“內化”。
????? 至于哪些情況下，元素可以建構出BFC，大家可以自行查看CSS文檔對BFC的定義，這里就不再贅述了。
