浮动的div是重叠的？

Question

目前,一个div浮动 - 我的问题是为什么两个div重叠,即使每个div都设置了尺寸？我怎样才能解决这个问题？

HTML:

 <div class="wrapper">
    <div class="block1">
    </div>
    <div class="block2">
    </div>
 </div>

我的CSS:

.wrapper {border:black solid;width:500px;height:1000px}
.block1 {width:300px;height:300px;float:right;border:solid red;}
.block2 {width:300px;height:300px;border:solid green;}

jsfiddle在这里 - http://jsfiddle.net/FLwUA/1/

Answer 1

两个div重叠,因为一个在DOM布局中固定(非浮动的一个),另一个从DOM结构(浮动的一个)中有效地移除,并且可以自由叠加,因为两者不能在父布局中并排放置容器由于宽度小两个.

要解决此问题,有几个选项,具体取决于修复的含义.

您可以在非浮动div上使用CSS'clear'属性来强制它在其一侧或两侧都没有任何内容('clear:both;'或'clear:left;'在给定的场景中).

要么

您可以将非浮动div设置为浮动,这也将使其脱离DOM布局,以便它现在与其他浮动div处于相同的情况.

额外

仅供参考,以防所有浮动对象成为问题.在不浮动div的情况下实现相同结果的一种方法是使用"display:inline-block;" 两者都有CSS属性,但您需要在HTML中交换两个div的顺序以获得相同的布局.