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 here - 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的排序以获得相同的布局。

Answer 2

这是因为您使用像素为它们提供了定义的宽度 - 您的包装宽度仅为500px，但是您使用的300px 300px内的div等于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;}

浮动的div是重叠的？

2 个答案: