浮动的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 here - http://jsfiddle.net/FLwUA/1/

- user1031742

---

因为 300 + 300 > 500。 - dfsq

你的意思是，第一个 div 应该在第二个 div 的上方还是它们不应该重叠并且保持在同一行？ - Lemur

是的，我的意思是如何防止它们重叠 - 在这种情况下，我不希望它们并排。如果包装器为500px，并且两者都有固定宽度，则两者都无法适应其中，因此第二个div应该留在下面。 - user1031742

Answer 1

两个 div 重叠是因为一个固定在 DOM 布局中（未浮动的 div），而另一个被实际上从 DOM 结构中移除了（浮动的 div），并且由于宽度太小，两者无法并排适应父容器，因此可以自由覆盖。

要修复这个问题，有几种选项，具体取决于您对“修复”的定义。

您可以在未浮动的 div 上使用 CSS 的 'clear' 属性，强制其没有一个或两个侧边有任何东西（在给定的情况下使用 'clear:both;' 或 'clear:left;'）。

或者

您可以将未浮动的 div 设置为浮动，这也会将其从 DOM 布局中删除，使其处于与其他浮动 div 相同的情况。

---

额外信息 仅供参考，以防所有浮动对象成为问题。实现相同结果的一种方法而不浮动 div 是在两个 div 上使用 "display:inline-block;" 的 CSS 属性，但需要交换 HTML 中两个 div 的顺序才能获得相同的布局。

- TheManWithNoName

---

感谢您的解释。将第二个浮动 div 定位到右侧解决了问题。 - user1031742

没问题，只要小心浮动所有的div，因为这可能会导致奇怪的结果，取决于其他DOM对象的操作。 - TheManWithNoName

感谢您的解释！ - Kiran

Answer 2

这是因为你使用像素定义了它们的宽度 - 你的包装器宽度只有 500px，然而你在内部使用了 300px x 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;}

- dsgriffin

---

谢谢。浮动div是问题所在。 - user1031742

这是我很少用表格而不是以“正确的方式”使用CSS时没有完全受够的几次之一。谢谢。 - Charles Clayton