好久沒寫博客了，最近撿起前端代碼開始碼，一些基本的東西都忘記了，覺得自己停滯不前的原因就是沒做好鞏固——廢話
我們常常在做盒子嵌套的時候，最外層盒子不想給他設置高度，因為我們填充的內容不確定有多大，一般就選擇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了，效果如下：
