Html 不正确浮动的元素

我有一堆包含图像和h1标题的锚定标签。我已经应用了float元素，允许它们以2行为一行进行布局。然而，出于某种奇怪的原因，银河系连接导致下一个锚向右浮动。如果你把银河系和土星互换，它会运转良好。我一辈子都不知道为什么。谁能给我解释一下这种奇怪的现象吗

---

这是我的页面的JSFIDLE:

如果您将

清除：两个
添加到Andromeda锚点，它将修复浮动问题。我希望您可以将
.clear
类添加到任何其他可能需要它的锚中（如果您添加更多）

说明：带有
clear:both
的元素可防止带有浮动的左侧和右侧元素对页面布局的流动产生影响。在这种情况下，银河系锚浮子对下面的元素产生了不利影响。通过将
clear:both
添加到仙女座锚点，银河系的浮子不再向下推动其余的元素

替代解决方案：浮动问题的发生是因为您有不同高度的锚定标记。它们无法正确堆叠，因为一个浮子比另一个浮子向下推得更远。如果您为所有这些设置了相同的高度，则可以在不清楚的情况下解决问题：两者都是
 我建议尝试将你的#主题内容设置为一个菜单{height:auto}

并删除float：左移到同一行（例如#主题内容a菜单）
与Kumar的答案相同的原因被否决。我在我的问题中明确指出，我的
浮动：之所以留在那里是有原因的。当我键入我的答案时，我不知道有人已经回答了！我的错！这个解决方案解决了这个问题。不过，我只想用+1来更好地解释为什么它能工作，而不是“它就是这样”。解释补充道，希望能有所帮助！干杯好的，但是为什么它会对页面布局的流程产生影响呢。这就是我要求解释的原因。是的，我知道clear解决了问题，但它到底解决了什么问题？清楚了吗？（双关语）发生浮动问题是因为您有不同高度的锚定标记。它们无法正确堆叠，因为一个浮子比另一个浮子向下推得更远。如果您为所有这些设置了相同的高度，则可以在不清除
的情况下解决问题：两个
。这就是我要找的。非常感谢。此外，您可能希望将其纳入答案中。你可能会得到更多的+1