CSS浮動之高度塌陷
** “浮動”二字，顧名思義，就是讓一個元素飄着、浮着，使之脫離文檔流；它的作用就是讓豎着排的元素橫向排列。**
實例：用兩個div標籤
浮動之前
浮動之後
浮動的屬性值：左浮動：float:left;
右浮動：float:right;
默認值：float:none;
接下來我們來談談元素浮動之後出現的高度塌陷的問題。那什麼是高度塌陷呢？
所謂浮動造成的高度塌陷，就是在父元素沒有設置高度的情況下，其子元素浮動後，脫離文檔流，則父元素處於塌陷狀態（沒有高度）；因爲子元素浮動後是不佔據父元素的位置空間的。舉個形象的例子：在塑料袋（父元素）中放了一個小紙箱（子元素），此時塑料袋是被小紙箱撐大的，小紙箱佔據了塑料袋的空間，而當你把小紙箱拿出來時（浮動），塑料袋裏沒有了小紙箱，則之前被撐開的塑料袋就會變癟，沒有了高度，失去空間。這就是高度塌陷。
而當出現高度塌陷後我們如何解決呢？（用兩個div標籤來實驗）
如圖：父元素（box1）和子元素（box2）的初始狀態
初始狀態是box2在box1中，box1並沒有設置高度，結果父元素box1是被撐開的。
當子元素（box2）浮動之後就讓父元素（box1）產生了高度塌陷。
通常解決高度塌陷的方法有4種：
1.給父元素（box1）設置高度（這種方法適合高度固定的佈局）
2.給父元素添加聲明overflow:hidden;（不建議使用）
3.給所有的浮動元素的最後添加一個空標籤，如div、p等，然後添加聲明{clear:both; }。如果考慮到IE6和IE7瀏覽器低版本的兼容問題，再加上 hight:0; overflow:hidden;（不建議使用）
4.用after僞元素清除浮動（萬能清除法），給塌陷的父元素添加聲明 box1:after{content:””; clear:both; display:block; visibility:hidden; }。如果考慮到IE6和IE7瀏覽器低版本的兼容問題，再加上 hight:0; overflow:hidden;（通用法）
另外還有3種解決方法，雖然能解決高度塌陷的問題，但是還帶來其他的問題；所以基本不用。（瞭解）
1.父元素也浮動；（治標不治本，引發其他問題）
2.給父元素display:table;（轉成表格）
3.可以給父元素添加overflow:auto/scroll;(容易造成滾動條)
小夥伴們 ，以上這些方法都可以解決浮動帶來的高度塌陷的問題噢！對此你們是不是對高度塌陷有了更多的理解，也歡迎在評論區中提出其他解決高度塌陷的方法。讓我們一起在學習中成長，加油！