html - float div 是否重叠？

Question

目前，一个 div 是 float 的 - 我的问题是为什么两个 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 布局中是固定的(非 float 的)，而另一个有效地从 DOM 结构中移除( float 的)并且可以自由重叠，因为两个不能并排放置在父容器中，由于宽度小了两个。

要修复此问题，有多种选择，具体取决于修复的含义。

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

或

您可以将非 float 的 div 设置为 float ，这也会将其从 DOM 布局中移除，这样它现在与另一个 float 的 div 处于相同的情况。

---

额外的

仅供引用，以防所有 float 对象成为问题。在不 float div 的情况下实现相同结果的一种方法是使用“display:inline-block;”它们都具有 CSS 属性，但您需要交换 HTML 中两个 div 的顺序以获得相同的布局。