`

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

 
阅读更多

转于：http://www.divcss5.com/jiqiao/j612.shtml

------------------------------------------------------------------------------

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

外层父级DIV不能自适应高度-
最外层的父级DIV不能自适应高度-不能随对象撑开没有高度

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

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

1、首先我们先看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自适应高度撑开截图
子对象使用float后，父div不能自适应高度实例截图

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

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

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

1、完整div+css实例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 解决外层父div自适应高度截图

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

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

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

1、加clear效果完整div css代码

  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解决父div不能自适应高度

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

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

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

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

1、完整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; 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方法截图

父div加overflow样式解决父自适应高度
父div加overflow样式解决父自适应高度

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

相关推荐阅读：
1、css清除浮动
2、div自适应高度
3、css自适应高度
4、css解决图片撑破div
5、div css不能显示背景颜色

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/jiqiao/j612.shtml

 

 

分享到：
| 三步升级已安装的 Android SDK 和 ADT 插 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css+div自适应窗口宽度

    总的来说，CSS+div自适应窗口宽度主要依靠`min-width`, `width`, `float`和百分比单位等属性来实现。通过合理的布局和JavaScript辅助，可以创建出适应不同屏幕尺寸的响应式网页，确保在各种设备上提供良好的用户体验...

    div不能自适应高度不能随图片的高度变化

    总结以上几种方法，我们可以通过不同的CSS技术手段来解决&lt;div&gt;不能随图片高度变化而自适应高度的问题。每种方法都有自己的使用场景和优缺点，开发者可以根据实际页面结构和布局需求来选择最合适的解决方案。在实际...

    关于div自适应高度/左右高度自适应一致的js代码

    通过上述两种方法的结合使用，我们就可以解决在网页布局中常见的左右两侧DIV自适应高度以及DIV高度自适应屏幕的布局问题。这不仅有助于保持页面布局的整洁和一致性，而且能够提升网页在不同设备和屏幕尺寸上的适应性...

    div+css菜单导航布局自适应宽度

    本主题聚焦于"div+css菜单导航布局自适应宽度"，这是一种确保导航栏在不同屏幕尺寸下都能良好展示的技术。这种技术在响应式网页设计中尤为重要，因为现代网站需要在手机、平板电脑和桌面电脑等不同设备上提供一致的...

    里面的div怎么撑开外面的div让高度自适应

    标题和描述中提到的问题正是关于这个需求：如何让内部的 `div` 撑开外部的 `div`，使得外部 `div` 的高度能随内容增多而自适应。 在正常情况下，如果内部 `div` 的内容高度超过外部 `div` 的固定高度，外部 `div` ...

    div+css模板布局 右侧固定，左侧自适应

    1. **浮动布局**：早期的CSS布局常用浮动（`float`）属性，通过`float:left`和`float:right`让左右两侧的`div`并排显示。但是，这种方法可能导致父元素高度塌陷，需要额外的清理或clearfix解决。 2. **定位布局**：...

    2列左窄右宽、高度自适应CSS模板

    "2列左窄右宽、高度自适应CSS模板"是一种常见的网页布局模式，它将页面分为两个部分：左侧窄栏和右侧宽栏。这种布局广泛应用于各种网站，如博客、电子商务平台等，因为它可以有效地展示主要内容和辅助信息。 首先，...

    div ul li 嵌套后如何解决增加多个li后DIV高度自适应问题

    总的来说，通过合理设置 `li`、`ul` 和 `div` 的高度属性，以及使用 `clear:both` 解决浮动问题，我们可以实现 `div` 高度自适应 `li` 的功能。当在 `ul` 中添加更多 `li` 时，这个结构会自动扩展其高度以适应新的...

    DivCSS.rar_ divcss_divcss

    在网页设计领域，HTML与CSS是不可或缺的基础技术，而DivCSS则是HTML布局的重要组成部分。本篇将基于提供的资料“DivCSS.rar”中的“DivCSS.pdf”，深入探讨DivCSS的核心概念、布局技巧以及实际应用。 一、DivCSS...

    div+css常见兼容性问题

    6. 外部`div`不应固定高度，使用`overflow: hidden`可以实现高度自适应。 7. 为了鼠标悬停效果，可以使用`cursor: pointer`，但在IE6中应使用`cursor: hand`。 此外，IE6还有一个著名的“双倍边距BUG”，当一个浮动...

    css float属性_动力节点Java学院整理

    - 当一个浮动元素（如`float:left`的`div-a`）与另一个块级元素（如`div-b`）相邻时，如果空间足够，`div-b`会填充`div-a`留下的空间，两者可能发生重叠，浮动元素（`div-a`）位于上方。 - 如果浮动元素与内联元素...

    div+css 兼容性总结

    如果父级`div`是页面最外层，且不想浮动，可以在子`div`下方添加一个清除浮动的`div`，如`&lt;div style="clear:both"&gt;&lt;/div&gt;`。 6. **链接边框与背景色** - Firefox下，为链接添加边框和背景色时，需设置`display:...

    DIV+css学习 精通CSS实例

    在IT行业中，网页设计是至关重要的一个领域，而DIV+CSS技术则是构建高效、美观、响应式网页的基础。本教程“DIV+CSS学习 精通CSS实例”旨在帮助初学者掌握这一关键技术，通过20个精心设计的实例，深入浅出地讲解了...

    DIV+CSS布局练习

    流体布局使用百分比定义宽度，能自适应不同屏幕尺寸；固定布局则使用像素单位，适用于固定大小的屏幕；响应式布局则根据设备屏幕大小调整布局，常用媒体查询实现。 5. **定位**：CSS提供了相对定位、绝对定位和固定...

    CSS 浮动.pdf

    3. **使用 Flexbox 或 Grid 布局** - 现代的CSS布局技术如Flexbox和Grid提供了更强大的布局能力，可以替代浮动，而不需要手动清除浮动。例如，使用Flexbox的`flex-wrap: wrap;`可以让元素在容器内换行，无需考虑浮动...

    用CSS+DIV做的网上书店模板

    综上所述，"用CSS+DIV做的网上书店模板"涉及到的知识点广泛且深入，包括但不限于盒模型、定位、浮动、响应式设计、布局模型以及网页模板设计的诸多方面。在实际操作中，我们需要结合HTML结构、CSS样式和用户需求，...

    div+css电子书

    2. **流体布局**：使用百分比单位配合CSS的`max-width`和`min-width`属性，可以使布局随浏览器窗口大小变化而自适应。 3. **Flexbox布局**：CSS3的弹性盒模型（Flexbox）提供了一种新的布局方式，可以轻松实现主轴...

    CSS清除浮动方法总结

    假设一个 div 内部有个浮动的 div，当内部 div 的高度要比外层的父级 div 高度大时，将会导致父级 div 高度无法随着内部 div 的高度自适应，这是由于浮动元素已经脱离了正常文档流，因此无法对父级元素产生影响。...

    DIV+CSS相对IE6、IE7和IE8的兼容问题

    在使用`float`布局时，非浮动元素可能会出现在浮动元素下方，而不是按顺序排列。这是因为浮动元素没有真正从文档流中移除。解决方法是使用伪元素或`clear`属性来清除浮动，以及使用`overflow:auto;`使父元素自适应子...

    css+div浏览器兼容技巧

    - 清除浮动可以避免父元素因子元素浮动而高度塌陷。常见的清除浮动方法包括：使用clearfix类、设置`overflow:hidden`或使用`clear:both`。自适应高度通常通过JavaScript或CSS的`:last-child`伪类来实现。 以上是...

Magicbox
Global site tag (gtag.js) - Google Analytics