當子元素不浮動的時候，父元素的高度是由子元素撐起來的。
子元素A和B是兩個div，獨占一行
效果如圖：
當子元素B浮動起來之后，父元素高度塌陷到只剩子元素A的高度
效果如圖：
當給子元素A（div）設置CSS屬性：display：inline 后，A的寬高將不起作用，寬高由內容撐開，即被字母A撐開。此時父級元素高度沒有塌陷到和A一樣，而是和B的高度一樣
效果如圖：
當子元素A和B同時浮動起來之后，A的CSS屬性：display：inline失效，效果為float的效果，同時父級元素的高度徹底塌陷為0
效果如圖：
解決塌陷方案 1 ： 可以讓父級元素也浮動起來，跟子元素處在同一層上。
效果如圖：
但是這樣做的時候，如果在父級元素后面緊跟一個元素，這個元素會填到藍色背景的父級元素底下的位置
效果如圖 （父級元素2，黃色背景，高度為藍色元素的2倍）：
父級2 的一半高度插到了浮動起來的藍色元素底下
這樣會造成布局錯亂的問題，正常情況下是不希望后續元素被遮住的，所以要給父級2元素添加一個CSS樣式 clear:both;
效果如圖： 這樣就可以解決遮蓋問題
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
解決塌陷方案 2 ：給父級元素添加一個CSS屬性 overflow:hidden
這樣會強制父級元素包裹住浮動的子元素，子元素可以撐開父級元素的寬高
效果如圖： 此時父級2正常布局即可，不會出現遮蓋問題。
以上兩種解決父級元素塌陷和遮蓋問題的方法是我常用的兩種方法，歡迎補充。
（友情提示：頻繁更改樣式的時候，瀏覽器容易出現緩存，即正確更改了樣式，但頁面並未變成新樣式的樣子，非常影響樣式的調整，需要注意）