⼦div⽤了float浮动之后，如何撑开⽗元素，让⽗元素div⾃动适应
⾼度
当在对象内的盒⼦使⽤了后，导致对象本⾝不能被撑开⾃适应⾼度，这个是由于浮动产⽣原因。
如何解决⽗div对象⾃适应⾼度，⽅法有三种，接下来DIVCSS5逐⼀介绍。
1、⾸先我们先看：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8" />
5. <title>⽗div不⾃适应⾼度实例</title>
6. <style>
7. .divcss5{ :500px; :1px solid #000; padding:10px}
8. .divcss5-lf{ float:left; width:220px; height:100px; background:#000}
9. .divcss5-rt{ float:right; width:230px; height:100px; background:#06F}
10. </style>
11. </head>
12. <body>
13. <div class="divcss5">
14. <div class="divcss5-lf"></div>
15. <div class="divcss5-rt"></div>
16. </div>
17. </body>
18. </html>
2、问题效果截图：
⼦对象使⽤float后，⽗div不能⾃适应⾼度实例截图
⽅法⼀：对⽗级设置固定⾼度  -
此⽅法可⽤于能确定⽗级div内对象⾼度。
假如以上案例，我们知道内部div⾼度100px，那对⽗级设置为100px看看效果。
1、完整实例代码（对⽗div加⾼度）：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8" />
5. <title>⽗div不⾃适应⾼度实例</title>
6. <style>
7. .divcss5{width:500px;border:1px solid #000;:10px; height:100px}
8. .divcss5-lf{ float:left; width:220px; height:100px; background:#000}
9. .divcss5-rt{ float:right; width:230px; height:100px; :#06F}
10. </style>
11. </head>
12. <body>
13. <div class="divcss5">
14. <div class="divcss5-lf"></div>
15. <div class="divcss5-rt"></div>
16. </div>
17. </body>
18. </html>
2、加⾼度解决不能撑开⼦对象使⽤float效果截图
对⽗加⾼度100px 解决外层⽗div⾃适应⾼度截图
此⽅法缺点，⽗级是固定⾼度，⽽不随内容⾼度⾃适应⾼度，没⾼度。此⽅法针对能确定⽗div内的内容⾼度情况下使⽤。⽅法⼆：使⽤css clear清除浮动  -
对⽗级闭合</div>前加⼀个清除浮动对象。
1、加clear效果完整代码
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8" />
5. <title>⽗div不⾃适应⾼度实例</title>
6. <style>
7. .divcss5{width:500px;border:1px solid #000;padding:10px}
8. .divcss5-lf{ float:left; width:220px; height:100px; background:#000}
9. .divcss5-rt{ float:right; width:230px; height:100px; background:#06F}
10. .clear{ clear:both}
11. </style>
12. </head>
13. <body>
14. <div class="divcss5">
15. <div class="divcss5-lf"></div>
16. <div class="divcss5-rt"></div>
17. <div class="clear"></div>
18. </div>
19. </body>
20. </html>
2、加解决⽗div不能⾃适应⾼度
使⽤clear:both清除⽗级内⼦对象产⽣浮动
此⽅法需要注意是clear:both加的位置，不是对⽗级直接加clear样式，⽽是在⽗级</div>前加带clear对象盒⼦。
⽅法三：对⽗级样式加overflow样式  -
此⽅法⾮常简单，也可以作为推荐解决⽗级不能被撑开⾃适应⾼度的⽅法，可以不增加对象，只需要对⽗级加⼀个样式即可。
1、完整代码
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8" />
5. <title>⽗div不⾃适应⾼度实例</title>
6. <style>
7. .divcss5{width:500px;border:1px solid #000;padding:10px; overflow:hidden }
8. .divcss5-lf{ float:left; width:220px; height:100px; background:#000}
9. .divcss5-rt{ float:right; width:230px; height:100px; background:#06F}
10. </style>
11. </head>
12. <body>
13. <div class="divcss5">
14. <div class="divcss5-lf"></div>
html里的float是什么意思15. <div class="divcss5-rt"></div>
16. </div>
17. </body>
18. </html>
2、加⽅法截图
⽗div加overflow样式解决⽗⾃适应⾼度
推荐。此⽅法为⾮常简单解决⼦⽤float，⽗div不能⾃适应⾼度，能随⽗内容多少⽽⾃适应⾼度没有⾼度。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。