浮动元素来自下方，而不是侧面

Question

我不确定导致此问题的代码是什么，因此我会要求您查看floating action button behaviour。

侧边栏#widgets与#content的顶部不匹配。它比#content低约1430像素，并且Chrome检查器没有显示任何边距，填充因此导致此问题。

你能看到问题吗？

Answer 1

我能想到的一个快速解决方法是将位置设置为absolute，并将right设置为大约10px，位于#widgets的css中：

#widgets {
    position: absolute;
    right: 10px;
}

哪个收益率：

Answer 2

将#widgets元素放在 #content之后。

此行为是由浮动引起的。作为一般规则，将要浮动的元素放在要围绕浮动的“main”元素之前。为了简化，float获取元素，将其从正常流中移除，将其放置在指定位置，然后在浮动元素周围呈现跟随元素。

到#content渲染时，将内部或旁边的东西浮起来为时已晚。