防止浮动元素推其他元素

Question

我的代码是这样的：

<div class="padding5"> 
<div id="div1" class="float_left wh50"></div> 
<div id="div2" class="float_left h50">Long text goes right here, Lorem Ipsum Dolor Sit Amet.Long text goes right here, Lorem Ipsum Dolor Sit Amet.Long text goes right here, Lorem Ipsum Dolor Sit Amet.Long text goes right here, Lorem Ipsum Dolor Sit Amet.</div>       
<div id="div3" class="float_right wh50"></div> 
<div id="div4" class="float_right wh50"></div>                               
<div class="clear"></div>             
</div> 

我的CSS是这样的：

<style> 
.padding5{padding:5px;} 
.wh50{width:50px;height:50px;} 
.h50{height:50px;} 
.float_left{float:left;} 
.float_right{float:right;} 
</style> 

现在，如果我调整我的窗口（并使其变小），我想要的内容从div id = 2将单词分隔到新行，但不是。继续推动其他因素。

Answer 1

从.wh50类中删除height。或将其设置为min-height: 50px;。高度声明导致div3和div4显示为它们未被清除。

.padding5{padding:5px;} 
.wh50{width:50px;height:50px;} 
.h50{min-height:50px;} 
.float_left{float:left;} 
.float_right{float:right;}