文章内容详情

子级标记使用float浮动后，父级不撑开解决办法


解决父级自适应高度，方法如下：


1、让我们看html源代码：


 
 
 
父级不自适应高度title>   <br /> <style>  <br /> .div{ width:500px; border:1px solid #000; padding:10px} <br /> .div-lf{ float:left; width:220px; height:100px; background:#000}  <br /> .div-rt{ float:right; width:230px; height:100px; background:#06F}  <br /> </style>   <br /> <head>  <br /> <body> <br /> <div class="div"> <br /> <div class="div-lf"><div>  <br /> <div class="div-rt"><div>  <br /> <div>  <br /> <body>  <br /> <html></p><p style="margin:auto;padding:inherit;font-stretch:normal;font-size:16px;line-height:1.8;font-family:tahoma, 'microsoft yahei', 微软雅黑;color:#333333;white-space:normal;background-color:#FFFFFF;"><br /></p><p style="margin:auto;padding:inherit;font-stretch:normal;font-size:16px;line-height:1.8;font-family:tahoma, 'microsoft yahei', 微软雅黑;color:#333333;white-space:normal;background-color:#FFFFFF;"><strong><span style="color:#000000;">2、问题效果截图：</span></strong> </p><p style="margin:auto;padding:inherit;font-stretch:normal;font-size:16px;line-height:1.8;font-family:tahoma, 'microsoft yahei', 微软雅黑;color:#333333;white-space:normal;text-align:center;background-color:#FFFFFF;"><img src="http://www.divcss5.com/uploads/allimg/1309/1_130903114447_1.png" data-ke-src="http://www.divcss5.com/uploads/allimg/1309/1_130903114447_1.png" width="560" height="458" alt="外层父级不能css自适应高度撑开截图" style="vertical-align:middle;max-width:810px;cursor:pointer;" /><br /> <span style="color:#000000;">子对象使用float后，父div不能自适应高度实例截图</span> </p><p style="text-align:left;margin:auto;padding:inherit;font-stretch:normal;font-size:16px;line-height:1.8;font-family:tahoma, 'microsoft yahei', 微软雅黑;color:#333333;white-space:normal;background-color:#FFFFFF;"><span style="line-height:36px;text-indent:17px;color:#000000;"><strong>方法一：使用css clear清除浮动</strong></span> </p><p><br /></p><p style="margin:auto;padding:inherit;font-stretch:normal;font-size:16px;line-height:1.8;font-family:tahoma, 'microsoft yahei', 微软雅黑;color:#333333;white-space:normal;background-color:#FFFFFF;"><span style="color:#000000;">对父级</span><span style="color:#0000cc;"><span style="color:#000000;">div标签</span></span><span style="color:#000000;">闭合前加一个</span><span style="color:#0000cc;"><span style="color:#000000;">clear</span></span><span style="color:#000000;">清除浮动对象。</span> </p><p style="margin:auto;padding:inherit;font-stretch:normal;font-size:16px;line-height:1.8;font-family:tahoma, 'microsoft yahei', 微软雅黑;color:#333333;white-space:normal;background-color:#FFFFFF;"><span style="color:#000000;">1、加clear效果完整</span><span style="color:#0000cc;"><span style="color:#000000;">div css</span></span><span style="color:#000000;">代码</span> </p><p style="margin:auto;padding:inherit;font-stretch:normal;font-size:16px;line-height:1.8;font-family:tahoma, 'microsoft yahei', 微软雅黑;color:#333333;white-space:normal;background-color:#FFFFFF;"><span style="color:#000000;"><br /> </span> </p><p style="margin:auto;padding:inherit;font-stretch:normal;font-size:16px;line-height:1.8;font-family:tahoma, 'microsoft yahei', 微软雅黑;color:#333333;white-space:normal;background-color:#FFFFFF;"><html> <br /> <head> <br /> <meta charset="utf-8" /> <br /> <title>父div不自适应高度实例title>   <br /> <style>  <br /> .divcss5{width:500px;border:1px solid #000;padding:10px}  <br /> .divcss5-lf{ float:left; width:220px; height:100px; background:#000}  <br /> .divcss5-rt{ float:right; width:230px; height:100px; background:#06F}  <br /> .clear{ clear:both}  <br /> </style>   <br /> </head>  <br /> <body> <br /> <div class="divcss5"> <br /> <div class="divcss5-lf"></div>  <br /> <div class="divcss5-rt"></div>  <br /> <div class="clear"></div>  <br /> </div>  <br /> </body>  <br /> </html>  </p><p style="margin:auto;padding:inherit;font-stretch:normal;font-size:16px;line-height:1.8;font-family:tahoma, 'microsoft yahei', 微软雅黑;color:#333333;white-space:normal;background-color:#FFFFFF;"><span style="color:#000000;">2、加</span><span style="color:#0000cc;"><span style="color:#000000;">css clear</span></span><span style="color:#000000;">解决父div不能自适应高度</span> </p><p style="margin:auto;padding:inherit;font-stretch:normal;font-size:16px;line-height:1.8;font-family:tahoma, 'microsoft yahei', 微软雅黑;color:#333333;white-space:normal;text-align:center;background-color:#FFFFFF;"><img src="http://www.divcss5.com/uploads/allimg/1309/1_130903114646_1.png" data-ke-src="http://www.divcss5.com/uploads/allimg/1309/1_130903114646_1.png" width="557" height="491" alt="使用clear:both清除父级内子对象产生浮动" style="vertical-align:middle;max-width:810px;cursor:pointer;" /><br /> <span style="color:#000000;">使用clear:both清除父级内子对象产生浮动</span> </p><p style="margin:auto;padding:inherit;font-stretch:normal;font-size:16px;line-height:1.8;font-family:tahoma, 'microsoft yahei', 微软雅黑;color:#333333;white-space:normal;background-color:#FFFFFF;"><span style="color:#000000;">此方法需要注意是clear:both加的位置，不是对父级直接加clear样式，而是在父级前加带clear对象盒子。</span> </p><p style="margin:auto;padding:inherit;font-stretch:normal;font-size:16px;line-height:1.8;font-family:tahoma, 'microsoft yahei', 微软雅黑;color:#333333;white-space:normal;background-color:#FFFFFF;"><span style="line-height:36px;text-indent:17px;color:#000000;"><strong>方法二：对父级样式加overflow样式</strong></span> </p><p style="margin:auto;padding:inherit;font-stretch:normal;font-size:16px;line-height:1.8;font-family:tahoma, 'microsoft yahei', 微软雅黑;color:#333333;white-space:normal;background-color:#FFFFFF;"><span style="color:#000000;">此方法非常简单，也可以作为推荐解决父级不能被撑开自适应高度的方法，可以不增加</span><span style="color:#0000cc;"><span style="color:#000000;">div盒子</span></span><span style="color:#000000;">对象，只需要对父级加一个</span><span style="color:#0000cc;"><span style="color:#000000;">overflow:hidden</span></span><span style="color:#000000;">样式即可。</span> </p><p style="margin:auto;padding:inherit;font-stretch:normal;font-size:16px;line-height:1.8;font-family:tahoma, 'microsoft yahei', 微软雅黑;color:#333333;white-space:normal;background-color:#FFFFFF;"><span style="color:#000000;">1、完整</span><span style="color:#0000cc;"><span style="color:#000000;">css div</span></span><span style="color:#000000;">代码</span> </p><p style="margin:auto;padding:inherit;font-stretch:normal;font-size:16px;line-height:1.8;font-family:tahoma, 'microsoft yahei', 微软雅黑;color:#333333;white-space:normal;background-color:#FFFFFF;"><span style="color:#000000;"><br /> </span> </p><p style="margin:auto;padding:inherit;font-stretch:normal;font-size:16px;line-height:1.8;font-family:tahoma, 'microsoft yahei', 微软雅黑;color:#333333;white-space:normal;background-color:#FFFFFF;"><span style="color:#000000;"><html> <br /> <head> <br /> <meta charset="utf-8" /> <br /> <title>父div不自适应高度实例title>   <br /> <style>  <br /> .divcss5{width:500px;border:1px solid #000;padding:10px; overflow:hidden }  <br /> .divcss5-lf{ float:left; width:220px; height:100px; background:#000}  <br /> .divcss5-rt{ float:right; width:230px; height:100px; background:#06F}  <br /> </style>   <br /> </head>  <br /> <body> <br /> <div class="divcss5"> <br /> <div class="divcss5-lf"></div>  <br /> <div class="divcss5-rt"></div>  <br /> </div>  <br /> </body>  <br /> </html><br /> </span> </p><p style="margin:auto;padding:inherit;font-stretch:normal;font-size:16px;line-height:1.8;font-family:tahoma, 'microsoft yahei', 微软雅黑;color:#333333;white-space:normal;background-color:#FFFFFF;"><span style="color:#000000;"><br /> </span> </p><p style="margin:auto;padding:inherit;font-stretch:normal;font-size:16px;line-height:1.8;font-family:tahoma, 'microsoft yahei', 微软雅黑;color:#333333;white-space:normal;background-color:#FFFFFF;"><span style="color:#000000;"></span> </p><p style="margin:auto;padding:inherit;font-stretch:normal;font-size:16px;line-height:1.8;font-family:tahoma, 'microsoft yahei', 微软雅黑;color:#333333;white-space:normal;background-color:#FFFFFF;"><span style="color:#000000;">2、加</span><span style="color:#0000cc;"><span style="color:#000000;">css overflow</span></span><span style="color:#000000;">方法截图</span> </p><p style="margin:auto;padding:inherit;font-stretch:normal;font-size:16px;line-height:1.8;font-family:tahoma, 'microsoft yahei', 微软雅黑;color:#333333;white-space:normal;text-align:center;background-color:#FFFFFF;"><img src="http://www.divcss5.com/uploads/allimg/1309/1_130903114722_1.png" data-ke-src="http://www.divcss5.com/uploads/allimg/1309/1_130903114722_1.png" width="594" height="470" alt="父div加overflow样式解决父自适应高度" style="vertical-align:middle;max-width:810px;cursor:pointer;" /><br /> <span style="color:#000000;">父div加overflow样式解决父自适应高度</span> </p><p style="margin:auto;padding:inherit;font-stretch:normal;font-size:16px;line-height:1.8;font-family:tahoma, 'microsoft yahei', 微软雅黑;color:#333333;white-space:normal;background-color:#FFFFFF;"><span style="color:#000000;">推荐。此方法为非常简单解决子用float，父div不能自适应高度，不能随父内容多少而自适应高度没有高度。</span> </p><span style="color:#000000;"></span> <p><br /></p>

      阿喀交