當子元素不浮動的時候，父元素的高度是由子元素撐起來的。
子元素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正常布局即可，不會出現遮蓋問題。
以上兩種解決父級元素塌陷和遮蓋問題的方法是我常用的兩種方法，歡迎補充。
子元素浮動後 父元素的高度自適應
設定父元素的高度為aotu 或100 或者不設定，那麼父元素會根據子元素的高度而自動調整自身高度。栗子 div id wrap img src 1.png alt logo div id content div div css樣式 wrap content img顯示如下圖 比如給上述栗子的img新...
浮動造成的高度塌問題 清除浮動
首先給定兩個盒子 設定盒子樣式為 box1 box2 用浮動可以解決盒子間隙問題但是會造成高度塌陷，也就是outer的盒子沒高度了。此時使用內牆法可以解決。在給定的盒子裡面再加乙個盒子如 然後給這個盒子指定樣式如 outer clearfix 這樣就會解決高度塌陷問題啦。第二種方法 父元素新增 ov...
解決設定float樣式後父級元素不適應問題
無標題文件title 第一種解決辦法 這是最好的辦法，沒有任何 charset utf 8 無標題文件title box box pagebtn box lastbtn box nextbtn box after after和content是結合使用的缺一不可，意思是在.box的子元素最後面新增乙個...