解决子级用css float浮动而父级div没高度不能自适应高度_子div浮动的情况父div如何获得高度-优快云博客

本文详细介绍了三种解决IE7-下浮动元素margin-bottom失效的问题的方法，包括在父元素的最后一个非浮动元素上添加clear样式、使用overflow:hidden和直接在父元素样式上加float:left。同时提供了每个方法的代码示例和原理说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="divcss5"> 
<div class="divcss5-lf"></div> 
<div class="divcss5-rt"></div> 
<div class="clear"></div>

方法一: 在父元素的最后一个非浮动元素上加上clear样式，该方法同时解决了IE7-下浮动子元素的margin-bottom相对于父元素失效的BUG,若将

<div class="clear"></div>

放于父元素外（放其后面），即做为父元素的兄弟，也能解决IE7-下margin-bottom失效的BUG，但父元素将失去自适应高度

.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}

方法二:直接父元素样式上加overflow:hidden; 但浮动子元素若超出，可能导致子元素被隐藏，且不能修复IE7-下margin-bottom失效的BUG

.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}

方法三:直接父元素样式上加float:left; 与方法二一样, 不能修复IE7-下margin-bottom失效的BUG;其父元素需加上padding-bottom和min-height:样式才能在父元素没子元素下的难看，不同的是，当父元素宽度为100%了，还想让父元素有1px边框，而父元素的父元素有边框，此时用方法二就完美，1px自动算100%内部的，父元素还宽度还是100%;而用方法三父元素宽度为100%+2px;

转自:http://www.divcss5.com/jiqiao/j612.shtml