一、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 }