外部div自适应内部标签的高度，设置最小高度、最大高度

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