css - 防止 float 元素插入其他元素

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