对于初学者来说，进行网页布局时，总喜欢给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