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


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

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

     

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

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

    1、首先我们先看HTML源代码:

    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8" /> 
    <title>父div不自适应高度实例</title> 
    <style> 
    .divcss5{ width:500px; border:1px solid #000; padding:10px} 
    .divcss5-lf{ float:left; width:220px; height:100px; background:#000} 
    .divcss5-rt{ float:right; width:230px; height:100px; background:#06F} 
    </style> 
    </head> 
    <body> 
    <div class="divcss5"> 
    <div class="divcss5-lf"></div> 
    <div class="divcss5-rt"></div> 
    </div> 
    </body> 
    </html> 

    2、问题效果截图:

    子对象使用float后,父div不能自适应高度实例截图

    方法一:对父级设置固定高度

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

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

    1、完整div+css实例html代码(对父div加高度):

    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8" /> 
    <title>父div不自适应高度实例</title> 
    <style> 
    .divcss5{width:500px;border:1px solid #000;padding:10px; height:100px} 
    .divcss5-lf{ float:left; width:220px; height:100px; background:#000} 
    .divcss5-rt{ float:right; width:230px; height:100px; background:#06F} 
    </style> 
    </head> 
    <body> 
    <div class="divcss5"> 
    <div class="divcss5-lf"></div> 
    <div class="divcss5-rt"></div> 
    </div> 
    </body> 
    </html> 

    2、加高度解决不能撑开子对象使用float效果截图

    对父加高度100px 解决外层父div自适应高度截图

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

    方法二:使用css clear清除浮动

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

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

    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8" /> 
    <title>父div不自适应高度实例</title> 
    <style> 
    .divcss5{width:500px;border:1px solid #000;padding:10px} 
    .divcss5-lf{ float:left; width:220px; height:100px; background:#000} 
    .divcss5-rt{ float:right; width:230px; height:100px; background:#06F} 
    .clear{ clear:both} 
    </style> 
    </head> 
    <body> 
    <div class="divcss5"> 
    <div class="divcss5-lf"></div> 
    <div class="divcss5-rt"></div> 
    <div class="clear"></div> 
    </div> 
    </body> 
    </html> 

    2、加div clear解决父div不能自适应高度

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

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

    方法三:对父级样式加overflow样式

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

    1、完整css div代码

    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8" /> 
    <title>父div不自适应高度实例</title> 
    <style> 
    .divcss5{width:500px;border:1px solid #000;padding:10px; overflow:hidden } 
    .divcss5-lf{ float:left; width:220px; height:100px; background:#000} 
    .divcss5-rt{ float:right; width:230px; height:100px; background:#06F} 
    </style> 
    </head> 
    <body> 
    <div class="divcss5"> 
    <div class="divcss5-lf"></div> 
    <div class="divcss5-rt"></div> 
    </div> 
    </body> 
    </html> 

    2、加css overflow方法截图

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

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

    转载出处:http://www.divcss5.com/jiqiao/j612.shtml

  • 相关阅读:
    4星|《激荡十年,水大鱼大》:过去十年间国内商业简史
    4星|《三联生活周刊》2017年47期:所谓“嬉皮精神”,说白了就是让每一个人都能在不影响其他人的前提下,过自己想要的生活
    3星|《三联生活周刊》2017年48期:联大外文系主任叶公超让学生念一句英语就能判断出学生的籍贯
    3星|《终身成长》:成长型思维让人进步,固定型思维让人固步自封。有新意的励志书,但有锤子模式的嫌疑。
    4星|《癌症新知:科学终结恐慌》:非常新鲜的癌症科普
    PL/SQL Developer使用技巧
    Oracle数据导入导出imp/exp sp2-0734:未知的命令开头'imp...解决方法
    oracle数据库导入导出命令!
    如何完全卸载VS2010
    Oracle命令(一):Oracle登录命令
  • 原文地址:https://www.cnblogs.com/rnckty/p/4645306.html
Copyright © 2020-2023  润新知