在浮動布局中，父元素的高度預設是被子元素撐開的， 當子元素浮動後，其會完全脫離文件流，子元素從文件流中脫離，將會無法撐起父元素的高度，導致父元素的高度丟失，父元素高度丟失以後，其下的元素會自動上移，導致頁面的布局混亂。
下面來定義兩個盒子，box1為父元素，box2為子元素
給子元素box2 開啟浮動：
因為之前沒有給父元素設定高度，全靠子元素撐開，子元素浮動脫離文件流，父元素的高度沒有了，發生了高度塌陷。
解決方法
1.給父元素寫乙個高度。但是不是很好
2.給父元素加overflow: hidden;
3.可以給元素新增clear：both；
作用：清除左右浮動元素兩側中最大影響的那側
原理：設定清除浮動以後，瀏覽器會自動為元素新增乙個上外邊距以使其位置不受其他元素的影響
給浮動元素下面新增乙個空的盒子box3,設定clear：both；
box3將父元素給撐開了
4.可以使用以下**，clearfix 這個樣式可以同時解決高度塌陷和外邊距重疊的問題，當你在遇到這些問題時，直接給父元素新增使用clearfix這個類即可
.clearfix:
:before,
.clearfix:
:after
高度塌陷解決方法
如果父元素只包含浮動元素，且父元素未設定高度和寬度，那麼它的高度就會塌縮為零，也就是所謂的 高度塌陷 如果父級元素包含背景或者邊框，那麼溢位的元素就不像父級元素的一部分了。解決 高度塌陷 問題的方法 1.浮動父級元素，父級元素的高度就會擴大，直到完全包含它裡面的浮動元素。如果使用這種方法，一定要在該...
高度塌陷及解決方法
一 什麼是高度塌陷 在文件流中，當父元素沒有設定高度的時候，父元素的高度就取決於子元素的高度，也就是常常說的 由子元素撐開 當子元素設定為浮動，脫離了文件流，這時候就會造成父元素的高度塌陷，因為沒有子元素 撐著它的高度 這樣會導致父元素後面的元素往上移，造成布局混亂。二 解決此問題的方法 1.在後面...
高度塌陷的解決方法以及如何觸發BFC
解決高度塌陷 hack1 給父元素新增宣告overflow hidden 觸發乙個bfc hack2 在浮動元素下方新增空div,並給該元素新增宣告 divhack3 萬能清除浮動法選擇符 after ie8及以下無效 觸發bfc float屬性不為none position為absolute或fi...