高度塌陷問題產生的原因
想要了解產生高度塌陷問題的原因，先提及幾個知識點：
1.在文檔流中，父元素的高度默認是被子元素撐開的。
2.當子元素設置浮動以後，子元素會完全脫離文檔流。
也就是說：當子元素浮動之後，子元素完全脫離文檔流，此時將會導致子元素無法撐起父元素的高度，導致父元素的高度塌陷
看看具體情況：
html部分：
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
css部分：
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
border: 10px red solid;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.box3{
height: 100px;
background-color: #ADFF2F;
}
</style>
效果：
設置box2浮動之前的效果：
可以看到，設置box2浮動後，box1發生了高度塌陷。
———————————————————————————————————————————
解決高度塌陷的方法
首先，根據以上的知識點，我們可以馬上想到一種解決高度塌陷的方法，即：將父元素的高度寫死，以避免塌陷問題的出現。但是一旦高度寫死，父元素的高度將不能自動適應子元素的高度，所以這種方法是不推薦使用的！
那麼，還有沒有解決高度塌陷的方法呢？
直接引出另一個知識點：
根據w3c的標準，在頁面中的元素都隱含一個屬性叫做 Block Formatting Context。
簡稱BFC，當開啓BFC之後，元素將會具有以下特性:
（1）父元素的垂直外邊距不會和子元素重疊
（2）開啓BFC的元素不會被浮動元素所覆蓋
（3）開啓BFC的元素可以包含浮動的所有元素
那麼如何開啓BFC呢？
1. 設置元素浮動
2. 設置元素絕對定位
3. 設置元素爲inline-block
好，瞭解完這些之後，開始操作
———————————————————————————————————————————
解決高度坍塌方法一（不推薦）：
給父元素開啓BFC屬性（將父元素也設置爲浮動）
html部分：
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
css部分：
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
border: 10px red solid;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.box3{
height: 100px;
background-color: #ADFF2F;
}
</style>
效果：
可以看到，父元素沒有發生高度塌陷，但不對勁的地方顯而易見！
直接來說缺點：父元素的寬度丟失，且父元素以下的元素會上移，導致頁面混亂，不推薦這種方法！
———————————————————————————————————————————
解決高度坍塌方法二（不推薦）：
給父元素設置inline-block：
css部分：
.box1{
border: 10px red solid;
display: inline-block;
}
效果：
父元素的高度確實沒有塌陷，但缺點顯而易見！
直接來說缺點：父元素寬度丟失，不推薦這種方法！
———————————————————————————————————————————
解決高度塌陷方法三（不推薦）：
將父元素的overflow設置爲一個非visible的值
css部分：
.box1{
border: 10px red solid;
overflow: hidden;
}
效果：
可以看到，父元素沒有塌陷，寬度沒有丟失
優點：使用overflow：hidden 來開啓BFC解決高度塌陷問題，副作用最小！
注意：如果將overflow的值設置爲scroll，會出現滾動條，若設置值爲auto，效果正常。
———————————————————————————————————————————
解決高度塌陷方法四：
使用clear屬性來清除浮動元素對其他元素的影響
來看看w3c對clear屬性的說明及定義：
說明：
clear 屬性定義了元素的哪邊上不允許出現浮動元素。在 CSS1 和 CSS2 中，這是通過自動爲清除元素（即設置了 clear 屬性的元素）增加上外邊距實現的。在 CSS2.1 中，會在元素上外邊距之上增加清除空間，而外邊距本身並不改變。不論哪一種改變，最終結果都一樣，如果聲明爲左邊或右邊清除，會使元素的上外邊框邊界剛好在該邊上浮動元素的下外邊距邊界之下。
定義和用法：
clear 屬性規定元素的哪一側不允許其他浮動元素。
可選值：
*
left 在左側不允許浮動元素。
*
right 在右側不允許浮動元素。
*
both 在左右兩側均不允許浮動元素（清除對他影響最大的那個元素的浮動）。
*
none 默認值。允許浮動元素出現在兩側。
*
inherit 規定應該從父元素繼承 clear 屬性的值。
應用：直接在高度塌陷的父元素box1的最後，添加一個空白的子元素div：box3，然後在對其清除浮動，這樣可以通過這個空白的div來撐開父元素的高度
html部分：
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
css部分：
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
border: 10px red solid;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.box3{
clear: both;
}
</style>
效果：
可以看到，父元素的高度沒有發生塌陷！
直接來說優缺點吧：
優點：父元素沒有發生高度塌陷，也基本沒有副作用
缺點：使用這種方法雖然可以解決問題，但是會在頁面中添加多餘的結構！
我們想：既然這種方法基本沒有副作用，那麼我們能不能不在box1的後邊添加一個空白的div，也能達到這種效果呢？
肯定是有的，上邊的方法是用html添加了一個空白div，那我們來用css添加一個空白的div，就不會再頁面中添加多餘的結構！來看看方法五。
———————————————————————————————————————————
解決高度坍塌方法五：
通過after僞類，選中box1的後邊，添加一個空白的塊元素，讓後對其清除浮動
html部分：
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
css部分：
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
border: 10px red solid;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.box1:after{
content:"";/* 添加一個空內容 */
display: block;/* 轉換爲一個塊元素 */
clear: both; }
</style>
效果
可以看到父元素沒有發生高度塌陷，直接來說優缺點：
優點：這添加一個div的原理一樣，可以達到一個 相同的效果，而且不會再頁面中添加一個多餘的div，幾乎沒有副作用！
———————————————————————————————————————————
解決方案七（最佳）：
通過before和after僞類，在元素的前後加入一個content空內容
再使用display將內容設置爲表格，繼續使用clear屬性值爲both清除兩側元素對當前元素的影響。
.clearfix:before,.clearfix:after
{
content:"";
display:table;
clear:both;
}
哪個父元素髮生高度塌陷，就對哪個父元素使用上面的代碼！
優點：可以同時解決高度塌陷問題和父子元素外邊距重疊問題。
———————————————————————————————————————————
結語：若文章有錯誤的地方，煩請在評論區指出。當然，我會不定時的重新編輯寫過的文章，查錯及優化，希望能將最好的文章展現給讀者。