解决子级用css float浮动而父级div没高度不能自适应高度

短命女 2023-06-15 11:29 20阅读 0赞

解决子级对象使用[css float][]浮动 而父级[div][]不能自适应高度，不能被父级内容撑开解决方法，父级div没有高度解决方法。

![外层父级DIV不能自适应高度-][DIV_-]  
最外层的[父级][Link 1]DIV不能自适应高度-不能随对象撑开没有高度

当在对象内的盒子使用了[float][css float]后，导致对象本身不能被撑开自适应高度，这个是由于浮动产生原因。

如何解决父div对象自适应高度，方法有三种，接下来DIVCSS5逐一介绍。

**1、首先我们先看[HTML源代码][HTML]：**

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. </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、问题效果截图：**

![外层父级不能css自适应高度撑开截图][css]  
子对象使用float后，父div不能自适应高度实例截图

### 方法一：对父级设置固定高度   -   [TOP][] ###

此方法可用于能确定父级div内[子级][Link 1]对象高度。

假如以上案例，我们知道内部div高度100px,那对父级设置[css height][]为100px看看效果。

1、完整[div+css][div]实例[html][]代码（对父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;[padding][]:10px; height:100px\} 
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效果截图

![对父加高度100px解决不能撑开][100px]  
对父加高度100px 解决外层父div自适应高度截图

此方法缺点，父级是固定高度，而不随内容高度自适应高度，没高度。此方法针对能确定父div内的内容高度情况下使用。

### 方法二：使用css clear清除浮动   -   [TOP][] ###

对父级[div标签][div 1]闭合</div>前加一个[clear][]清除浮动对象。

1、加clear效果完整[div css][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;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、加[css clear][clear]解决父div不能自适应高度

![使用clear:both清除父级内子对象产生浮动][clear_both]  
使用clear:both清除父级内子对象产生浮动

此方法需要注意是clear:both加的位置，不是对父级直接加clear样式，而是在父级</div>前加带clear对象盒子。

### 方法三：对父级样式加overflow样式   -   [TOP][] ###

此方法非常简单，也可以作为推荐解决父级不能被撑开自适应高度的方法，可以不增加[div盒子][div 2]对象，只需要对父级加一个[overflow:hidden][overflow_hidden]样式即可。

1、完整[css div][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;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> 
15. <div class="divcss5-rt"></div> 
16. </div> 
17. </body> 
18. </html>

2、加[css overflow][overflow_hidden]方法截图

![父div加overflow样式解决父自适应高度][div_overflow]  
父div加overflow样式解决父自适应高度

推荐。此方法为非常简单解决子用float，父div不能自适应高度，不能随父内容多少而自适应高度没有高度。

[css float]: http://www.divcss5.com/rumen/r93.shtml
[div]: http://www.divcss5.com/
[DIV_-]: https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5kaXZjc3M1LmNvbS91cGxvYWRzL2FsbGltZy8xMzA5LzFfMTMwOTAzMTE0MzMwXzEucG5n?x-oss-process=image/format,png
[Link 1]: http://www.divcss5.com/rumen/r239.shtml
[HTML]: http://www.divcss5.com/html/h26.shtml
[width]: http://www.divcss5.com/rumen/r119.shtml
[border]: http://www.divcss5.com/rumen/r120.shtml
[css]: https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5kaXZjc3M1LmNvbS91cGxvYWRzL2FsbGltZy8xMzA5LzFfMTMwOTAzMTE0NDQ3XzEucG5n?x-oss-process=image/format,png
[TOP]: http://www.divcss5.com/jiqiao/j612.shtml#top
[css height]: http://www.divcss5.com/rumen/r123.shtml
[html]: http://www.divcss5.com/html/
[padding]: http://www.divcss5.com/rumen/r418.shtml
[background]: http://www.divcss5.com/rumen/r125.shtml
[100px]: https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5kaXZjc3M1LmNvbS91cGxvYWRzL2FsbGltZy8xMzA5LzFfMTMwOTAzMTE0NTQxXzEucG5n?x-oss-process=image/format,png
[div 1]: http://www.divcss5.com/html/h121.shtml
[clear]: http://www.divcss5.com/rumen/r424.shtml
[clear_both]: https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5kaXZjc3M1LmNvbS91cGxvYWRzL2FsbGltZy8xMzA5LzFfMTMwOTAzMTE0NjQ2XzEucG5n?x-oss-process=image/format,png
[div 2]: http://www.divcss5.com/rumen/r319.shtml
[overflow_hidden]: http://www.divcss5.com/rumen/r414.shtml
[div_overflow]: https://imgconvert.csdnimg.cn/aHR0cDovL3d3dy5kaXZjc3M1LmNvbS91cGxvYWRzL2FsbGltZy8xMzA5LzFfMTMwOTAzMTE0NzIyXzEucG5n?x-oss-process=image/format,png