好久没写博客了，最近捡起前端代码开始码，一些基本的东西都忘记了，觉得自己停滞不前的原因就是没做好巩固——废话
我们常常在做盒子嵌套的时候，最外层盒子不想给他设置高度，因为我们填充的内容不确定有多大，一般就选择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;}10div 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:*/}11div 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了，效果如下：
