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