一、div自適應高度：在前端開發中經常需要讓外層的div自動適應內部標簽和內容的高度，內部標簽可能是<div>、<ul>、<ol>或者文字等各種內容。造成外層的div不能自動適應內容高度的原因往往是因為內部標簽設置了float屬性，下面來看一下解決辦法。
1.用偽對象清除float屬性
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <!-- CSS --> 7 <style type="text/css"> 8 #wrap2{ 9 width: auto; 10 height: auto; 11 min-height: 250px;/*設置最小高度*/ 12 max-height: 500px;/*設置最大高度*/ 13 overflow: hidden;/*內容超出后隱藏*/ 14 border: 2px solid yellow; 15 } 16 #wrap2:after{ 17 content: ""; 18 visibility: hidden; 19 display: block; 20 clear: both; 21 } 22 #inner2{ 23 width: 200px; 24 height: 200px; 25 border: 1px solid black; 26 float: right; 27 } 28 </style> 29 </head> 30 <body> 31 <div id="wrap2" class=""> 32 <div id="inner2" class=""></div> 33 </div> 34 </body> 35 </html> 36
2.用空div來清除float屬性
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <!-- CSS --> 7 <style type="text/css"> 8 #wrap1{ 9 width: auto; 10 height: auto; 11 border: 2px solid yellow; 12 } 13 #inner1{ 14 width: 200px; 15 height: 200px; 16 border: 1px solid black; 17 float: right; 18 } 19 </style> 20 </head> 21 <body> 22 <div id="wrap1"> 23 <div id="inner1"></div> 24 <div style="clear:both;"></div> <!-- 在外層div的底部加一個空的div標簽，並設置樣式為clear:both; --> 25 </div> 26 </body> 27 </html>
二、給div設置最小、最大高度：
1 #wrap1{ 2 width: auto; 3 min-height: 100px; 4 max-height: 500px; 5 overflow: hidden; 6 border: 2px solid yellow; 7 }