浮动潜水是重叠的

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在父容器中不会并排适合，因为宽度是两个小。

要修复这个问题，有几个选项，这取决于你所说的修复是什么。

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

或

您可以将非浮动div设置为浮动，这也会将其从DOM布局中取出，因此它现在与其他浮动div处于相同的情况。

---

另外

只是为了在所有的浮动对象成为问题的情况下提供信息。在不浮动div的情况下实现相同结果的一种方法是使用"display:inline-block;"CSS属性，但是您需要交换HTML中两个div的顺序来获得相同的布局。

Answer 2

这是因为您使用像素给它们定义的宽度-您的包装宽度仅为500px，但是您使用300px由300pxdiv内部等于600px，因此它将结束在容器div之外。您可以使用百分比相对于父div，像这样。这是一个jsFiddle

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

或者，如果你想保持固定的宽度，如果它们太大，你可以在第二个块上使用float。这是jsFiddle

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