CSS浮動佈局帶來的高度塌陷以及其解決辦法
阿新 • • 發佈：2020-11-16
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .outer{ 8 border:10px red solid; 9 } 10 .inner{ 11 width:100px; 12 height:100px; 13 background-color:orange; 14 float:left; 15 /* 16 高度塌陷的問題： 17 在浮動佈局當中，父元素的高度預設被子元素撐開 18 檔子元素浮動後，其會脫離文件流，子元素會從文件流中> 脫離將會無法撐起父元素的高度，導致父元素的高度丟失 19 父元素高度丟失後，其下面的元素會自動上移，導致頁面佈局> 混亂 20 所以高度塌陷的問題是浮動佈局中比較常見的問題，這個問題> 我們必須進行處理 21 22*/ 23 } 24 /* 25 BFC-塊級格式化環境 26 -BFC是一個CSS中的一個隱含的屬性，可以為一個元素開啟BFC 27 開啟BFC該元素會變成一個獨立的佈局區域 28 -元素開啟BFC後的特點： 29 1.開啟BFC的元素不會被浮動元素鎖覆蓋 30 2.開啟BFC的元素子元素和父元素外邊距不會重疊 31 3.開啟BFC的元素可以包含浮動的子元素 32 可以通過一些特殊的方法來開啟元素的BFC 33 1.設定元素浮動 34 2.將元素設定為行內塊元素 35 3.將overflow設定為非visible的值 36 -hiden/auto 37*/ 38 </style> 39 </head> 40 <body> 41 <div class="outer"> 42 <div class="inner"></div> 43 44 </div> 45 </body> 46 </html> ~ ~ ~ ~ ~ ~ ~