css - 令人难以置信的奇怪 float 行为

Question

您将不得不看一下 the Fiddle对于这个

我遇到问题的元素，hoverHelper , 旨在显示 next无论悬停在 body ​​的哪个部位但仅在动画完成后

当动画结束时， float (将其从元素流中取出)透明覆盖 hoverHelper为了应用hover，被赋予了一个荒谬的高宽度和高度来覆盖整个页面。显示元素的事件 next .

本质上，我的问题是，当 float 元素悬停时，它会记录悬停并按应有的方式运行，但其他元素会受到负面影响。出于某种原因，浏览器使所有以下元素将其视为非 float 元素，即使它永远不会丢失 float:left。 .这意味着 anchor 和其他后续元素被向下推了数千个像素，这是 Not Acceptable

查看此行为的最简单方法是检查元素并强制 :hover在 actualHover .然后你会看到它是如何处理 float 的hoverHelper的。像一个非 float 元素

以下是我的 HTML 和相关的 CSS

<div id='hoverHelper'></div>
<div id='actualHover'></div>
<a href="#" id='next'>Next</a>
<div class='other'></div>

body { overflow:hidden; max-width:200px; max-height:200px;}
#hoverHelper {
    width:0px;
    height:0px;
    z-index:1;
    position:relative;
    float:left;
    margin-top:-1000px;
    margin-left:-1000px;
    animation: hhAnimation .001s 3s forwards;
}
#actualHover {
    width:50px;
    height:50px;
    background:teal;
    animation: yourAnimation 3s linear forwards;
}
#next {
    z-index:2;
    display: none;
}
#actualHover:hover ~ #next, #hoverHelper:hover ~ #next, #next:hover {
    display:inline-block;
}

此外，我最初使用的是 position:absolute在叠加层上，但这阻止了 next按钮被点击也是 Not Acceptable

我意识到我所做的是非常规的，但对我来说这是完全有道理的。对正在发生的事情有任何见解吗？

注意:

这个问题是通过替代解决方案解决的，而不是所发现的问题。我们仍然不知道为什么 float 元素会有这样的行为

Answer 1

与通过 float 从流中删除元素相反，使用 position:absolute。

您说过这会导致 #next 出现问题，但是如果您向其中添加类似 position:relative 的内容，它将是可点击的。 z-index 仅对定位元素有影响。

Working jsFiddle here - 为 helperhover 添加了半透明背景以进行演示。