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