Float是我們在頁面布局中常用的，也是非常重要的一個屬性，可以讓頁面布局變得更加靈活。
但是在繼續學習之后，尤其是掌握了寬高自適應之后，我們常常會發現一個奇怪的現象：如果父元素沒有設置高度，而子元素都浮動了的話，父元素就“癟”了。
就像下面這樣
<html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1{width: 400px;border: 1px solid #000;} .boxl{width: 200px;height: 200px;float: left;background: red;} .boxr{width: 100px;height: 100px;float: right;background: orangered;} </style> </head> <body> <div class="box1">紙 <div class="boxl">大火</div> <div class="boxr">小火</div> </div> </body> </html>
很顯然，紙是包不住火的。
但是這顯然不是我們想要的那樣。我們希望能使用浮動調整內部的布局，又希望父元素不會高度塌陷，要怎樣做呢？我總結了四種方法。
第一種方法：添加高度
很簡單，既然父元素高度自適應會塌陷，那就不自適應了，直接加上固定高度，那肯定是不會塌了。但是這種方法在頁面設計中顯然是不太合適的。因為比較簡單，代碼就不再附上了。
第二種方法：overflow:hidden;或者overflow:auto;
這兩種方法是利用對溢出元素的處理，使父元素緊貼子元素的邊界，這樣一來，高度塌陷也就解決了，只不過，因為是元素溢出屬性，所以真有元素溢出的話，也會按照給的屬性值執行。
一種情況無法顯示所有的內容，一種則會出現滾動條，都是各有缺陷。
還有一種方法，是在浮動的子元素下面添加一個空元素，添加屬性clear:both;
顧名思義，這個屬性的作用就是清除浮動，不過不是清除其他元素的浮動，而是清除左右浮動對自己的影響。
<html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1{width: 400px;border: 1px solid #000;} .boxl{width: 200px;height: 200px;float: left;background: red;} .boxr{width: 100px;height: 100px;float: right;background: orangered;} .clear{clear: both;border: 1px solid blue;} </style> </head> <body> <div class="box1">紙 <div class="boxl">大火</div> <div class="boxr">小火</div> <div class="clear">The World</div> </div> </body> </html>
看，添加這樣一個子元素后，父元素的高度也填充起來了。
只要把這個子元素設置成空的，既不會影響整體樣式，父元素也不會塌陷了。
只是這樣一來，頁面中就要添加很多空標簽，無意義的代碼很多，也很影響閱讀。於是在這之上，可以使用偽對象來簡化代碼。
在原代碼的基礎上添加.box1::after{content: "";height: 0;clear: both;display: block;}
再來看一下效果
這下，紙真的可以包住火了。
最后一種方法在我的學習中被稱為萬能清除法，事實上，現在的頁面開發中也常用這種方法來解決高度塌陷問題。
總結一下，解決高度塌陷的方法有四種：
1 添加固定高度 簡單粗暴 適合固定內容固定高度的頁面布局
2 overflow溢出隱藏 缺點是溢出內容會被隱藏或出現滾動條
3 浮動元素底部添加空標簽屬性clear:both; 代碼冗余 可讀性差
4 利用偽對象簡化代碼 可復用