父级div没高度不能自适应高度的原因—

父级div没高度不能自适应高度的原因——子级使用css float浮动

　　好久没写博客了，最近捡起前端代码开始码，一些基本的东西都忘记了，觉得自己停滞不前的原因就是没做好巩固——废话

　　我们常常在做盒子嵌套的时候，最外层盒子不想给他设置高度，因为我们填充的内容不确定有多大，一般就选择auto自适应。

　　然，子级盒子又是一个嵌套或者样式复杂点，超出父级盒子的边界外边，在央视里面调来调去调不好，试过修改display属性、又再嵌套盒子，都不是很理想，最后找了一圈（强大的百度）发现问题所在了，这个是由于浮动产生原因。

初始代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>div_自适应</title>
 5     <style type="text/css">
 6     .div1{
 7         border: 1px solid #ccc;
 8         width: 500px;
 9         padding: 20px;}
10     .div_l{
11         float: left;
12         background-color: lightgreen;
13         width: 200px;
14         height: 200px;}
15     .div_r{
16         float: right;
17         background-color:green;
18         width: 200px;
19         height: 200px;}
20     </style>
21 </head>
22 <body>
23     <div class="div1">
24         <div class="div_l">div_l</div>
25         <div class="div_r">div_r</div>
26     </div>
27 </body>
28 </html>

效果图如上，按照代码中div的需要，给父级div设置height=200px即可，若子级div数据较多，或者从后台调取数据进行添加时，设置的高度又不适用了。

代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>div_自适应</title>
 5     <style type="text/css">
 6     .div1{
 7         border: 1px solid #ccc;
 8         width: 500px;height: 200px;
 9         padding: 20px;}
10     div div{
11         float: left;
12         margin-right: 50px;
13         margin-bottom: 50px;
14         background-color:green;
15         width: 200px;
16         height: 200px;}
17     </style>
18 </head>
19 <body>
20     <div class="div1">
21         <div class="div_1">div_1</div>
22         <div class="div_2">div_2</div>
23         <div class="div_3">div_3</div>
24         <div class="div_4">div_4</div>
25     </div>
26 </body>
27 </html>

效果图如下：

方法一：对父级加 overflow 样式

代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>div_自适应</title>
 5     <style type="text/css">
 6     .div1{
 7         border: 1px solid #ccc;
 8         width: 500px;height: 200px;
 9         padding: 20px;
10         overflow: hidden;/*overflow:*/}
11     div div{
12         float: left;
13         margin-right: 50px;
14         margin-bottom: 50px;
15         background-color:green;
16         width: 200px;
17         height: 200px;}
18     </style>
19 </head>
20 <body>
21     <div class="div1">
22         <div class="div_1">div_1</div>
23         <div class="div_2">div_2</div>
24         <div class="div_3">div_3</div>
25         <div class="div_4">div_4</div>
26     </div>
27 </body>
28 </html>

效果如下：

治标不治本，我要的是自适应高度，要都显示。

方法二：对子级使用 clear 清除浮动

插入一个空的div盒子，用来做清除浮动，代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>div_自适应</title>
 5     <style type="text/css">
 6     .div1{
 7         border: 1px solid #ccc;
 8         width: 500px;
 9         padding: 20px;
10         }
11     .div_1,.div_2{
12         float: left;
13         margin-right: 50px;
14         margin-bottom: 50px;
15         background-color:green;
16         width: 200px;
17         height: 200px;}
18         .clear{ clear:both} 
19     </style>
20 </head>
21 <body>
22     <div class="div1">
23         <div class="div_1">div_1</div>
24         <div class="div_2">div_2</div>
25         <div class="div_2">div_3</div>
26         <div class="clear"></div> 
27     </div>
28 </body>
29 </html>

OK了，效果如下：