對於初學者來說，進行網頁布局時，總喜歡給DIV設定寬和高，因為這樣方便預覽效果，但是當內容超出了DIV高度時，則會遇到以下情況：
1 <!DOCTYPE html > 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 8 *{margin: 0;padding: 0;} 9 10 .box_r{ 11 width: 60%; 12 height: 42px; /1.*刪除*/ 13 margin :0 auto; 14 background: #f00; 15 color: #000;
/*2.添加overflow:hidden*/ 16 } 17 </style> 18 </head> 19 <body> 20 <div class="box_r"> 21 中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文 22 <div> 23 </body> 24 </html>
效果如下：
殊不知在實際的應用當中，DIV的高很多時候都是由內容撐開的（決定的）。要想解決以上問題，1.必要時可以用overflow:hidden;解決，讓溢出的內容隱藏。2.或者取消高度的設置，個人覺得這種方法則更好，這樣就做到了內容決定DIV高度，擴展性好。效果如下：
2019-07-1818:11:43