如何防止float:left的div被后面的div覆盖？

Question

I have the following code:

<div>
    <div onmouseover="this.style.color='red'" 
         onmouseout="this.style.color='blue'" 
         style="float:left">
        a
        <br/>
        b
        <br/>
        c
    </div>
    <div onmouseover="this.style.color='red'" 
         onmouseout="this.style.color='blue'" 
         style="position:relative;">
        Testing, one two three...
    </div>
</div>

第一个 div 使第二个 div 中的文本向右推，但不是第二个 div 本身，所以第一个内部 div 中的 a 将被第二个内部 div 中的 T 盖住，并且悬停在 a 上将不会触发 onmouseover。

这只是一个相当简单的例子，但我如何获得这种布局，保留第二个 div 的 position:relative，而不为其添加任何 margin，因为第一个 div 可能显示也可能不显示？第二个 div 将覆盖第一个 div 似乎很奇怪。

- yuttadhammo

---

根据您列出的HTML/样式，这些元素不应该有重叠的文本。您确定这是复制问题的整个示例吗？您能否提供更多的代码以提供上下文，包括所有应用的样式？您在哪些浏览器/版本中遇到了问题？ - Jon Adams

如果你尝试运行这段代码，你会发现a的onmouseover事件无效，虽然文本不会重叠。 - yuttadhammo

Answer 1

如果我理解正确... 请将 float: left; 也应用到第二个 div。

- Joonas