Question

我想知道是否有人有天才的想法，为什么我的内部链接不在网页上工作。我用标准

设置了html

<a href="#link"><button>Some Text</button></a>
....
bunch of content
....
<div id="link"></div>

在我查看足够多的代码并隔离导致问题的行之前，这不是原因不明的原因。在其中一个链接的css文件中有一个float：left用于li元素。该命令与按钮链接无关，因此我无法理解为什么它会使超链接无法工作。但是当“.grid .tile {float：left;}”显示为灰色时，链接再次起作用。

Answer 1

你得到的结果绝对正确。

案例1：

/*.grid .tile {float: left;} */
<div id="link" style="width:100%;height:30px;background:yellow;"></div>

结果：

然后，点击按钮即可到达此位置。

案例2：

.grid .tile {float: left;} 
<div id="link" style="width:100%;height:30px;background:yellow;"></div>

<强>结果：

请参阅div的位置（黄色背景）

所以，锚点工作正常。浏览器呈现，HTML或JavaScript没有问题。

第二案中发生事故的原因

你并不完全了解浮动。它呈现一个项目，如某些混合行为（显示：内联+绝对位置），这意味着，首先---＆gt; 不再有资格获得高度，然后为下一个项目提供空间 。其次， 这不再影响Y轴中其他项目的位置，即高度 。

所以现在你所有的所有（都是浮动的：左）对于在Y轴上占据空间或占据高度空间没有影响。所以Div，已经向上移动（就像位置：绝对物品对其他物品没有影响）。

所以，删除它会得到你想要的结果。

希望，这有帮助！

Answer 2

问题是除了<div id="link"></div>之外，所有内容都会浮动。我测试了以下内容，似乎有效。

.grid .tile { float: left;} /*cuase of problem*/
#link { clear:left;} /* add this */

clear:left;打破float并将div放回原来的位置。然后浮动重新开始。：）

一个潜在的问题是你可能不希望图片中断。也就是说，如果你仍然希望一切都能相互排列，花花公子的照片和汽车照片，那么只需要#link { float:left; }，但在我看来，因为照片属于不同的类型，所以休息似乎是恰当的。