高度塌陷的產生條件：父元素沒有設定高度，所有的子元素都浮動
父元素在文件流中高度預設是被子元素撐開的,
當子元素脫離文件流以後,將無法撐起父元素的高度,也就會導致父元素的高度塌陷
高度塌陷的解決辦法
1.給父元素設定高度，此方法適合高度固定的布局
原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題
優點：極其簡單、**少、容易掌握
缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題
2.給父元素新增宣告overflow:hidden, zoom:1;(zoom:1解決ie6的相容，overflow：hidden單獨使用高度不顯示的問題。若不考慮ie相容，可不寫)
原理：使用overflow:hidden時，觸發bfc,浮動元素參與高度的計算，瀏覽器會自動檢查浮動區域的高度 。
優點：簡單、**量少、 瀏覽器支援好
缺點：不能和position配合使用，因為如果有內容溢位顯示，會被隱藏。
3.在所有浮動的元素後面新增內容為空的塊元素，並且新增宣告clear:both; height:0;overflow:hidden;(新增height：0；和overflow：hidden；是為了避免這個空標籤如果是li的話，瀏覽器有預設高度。一般使用clear：both即可。)
原理：新增乙個空內容的塊元素，利用css提供的clear:both清除浮動，讓父級div能自動獲取到高度
優點：**量少 容易掌握 簡單易懂
缺點：新增了很多無意義的空標籤，影響到載入速度，不利於頁面優化。
4.萬能清除法：
給高度塌陷的元素新增偽物件（偽元素）:after，並宣告
給高度塌陷的元素新增宣告
原理：新增空內容，利用css提供的clear:both清除浮動，讓父級div能自動獲取到高度。display：block；使它豎著排列，考慮ie相容問題clearfix：after新增height:0;overflow:hidden;隱藏新增內容使用visibility：hidden。ie8及以上和非ie瀏覽器才支援:after ,zoom:1可解決ie7及以下相容問題
優點：不破壞文件結構、沒有***、瀏覽器支援好、不容易出現怪問題
缺點：**量多、要兩句**結合使用才能讓主流瀏覽器都支援。
建議：推薦使用，建議定義公共類，以減少css**。
5.給父元素新增宣告overflow:auto;zoom:1;(zoom:1解決ie6的相容，overflow：auto 單獨使用高度不顯示的問題。若不考慮ie相容，可不寫)
原理：使用overflow:auto時，觸發bfc,浮動元素參與高度的計算，瀏覽器會自動檢查浮動區域的高度 。『』
優點：簡單、**少、瀏覽器支援好
缺點：內部寬高超過父級div時，會出現滾動條。
6. 給父元素新增宣告 display:table;
1原理：將div屬性變成**2 14 15
16
17
18
19
優點：沒有優點
缺點：會產生新的未知問題。
7. 父元素也一起浮動
原理：所有**一起浮動，就變成了乙個整體
優點：沒有優點
缺點：會產生新的浮動問題。
8. 所有的子元素後面加 br標籤並定義樣式 clear:both.父元素新增zoom:1;
原理：所有子元素結尾處加 br標籤 clear:both ，清除浮動，便於計算高度。父元素定義zoom:1來解決ie相容問題，
高度塌陷的產生條件和解決方法
高度塌陷一般由浮動或者絕對或固定定位引起，定位引起的高度塌陷可以更換定位，這裡就不再累述了，這裡介紹下浮動引起的高度塌陷及解決辦法。浮動除了會讓元素水平排列外，還會讓元素脫離文件，讓下面的元素頂上去，文字會環繞顯示，這就是高度塌陷。box box1,box2,box3 在這裡插入描述 可以看到，如果...
頁面布局產生高度塌陷解決方法
給父級元素新增高度 優點 解決簡單 缺點 就不能做到寬高自適應了 在出現高度塌陷的父級元素設定overflow hidden 優點 可以解決高度塌陷並且能做到自適應，好理解 缺點 超出當前父級元素的盒子都會被隱藏掉 在最後乙個盒子新增標籤div，設定解決高度塌陷的樣式 預設樣式 clear both...
高度塌陷的產生原因及解決方法
當父元素未設定高度 時，所有子元素浮動後，造成 子元素脫離文件流進而無法把父元素撐開，父元素高度為0 產生高度塌陷 稱為高度塌陷問題。父元素高度塌陷後，父元素以下的元素都會向上移動，導致布局混亂，所以我們要解決高度塌陷的問題。如下 當我們讓div1和div浮動之後 我們可以發現，當子元素全都浮動後，...