防止浮動元素推其他元素

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