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

Question

我不确定是什么代码导致了这个问题，因此请您查看 live site。

边栏 #widgets 与 #content 的顶部不在同一水平线上。它比 #content 水平低约 1430 像素，并且 Chrome 检查器显示没有边距，导致此问题的填充。

你能看出问题所在吗？

Answer 1

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

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

产生：

Answer 2

将 #widgets 元素放在 之前 #content.

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

到 #content 渲染完成时，在其内部或旁边漂浮某些东西为时已晚。