为什么浮下降？

Question

我有一个简单的CSS布局

wrapper
header
left-sidebar / main-content / right-sidebar
footer

但我的主要内容似乎下降（浮动下降），我不明白为什么。

我已将其设置为小提琴 - fiddle

我可以通过删除float:left div中的main-content来解决这个问题，但我不明白为什么会这样。容器（包装器）有一个浮动：左边，我认为这是避免'浮动下降'的方法

我是浮动的：左侧边栏和包装器，所以我认为主要内容只是简单地与左侧栏对齐如果我设置浮动：左侧主要内容div

Answer 1

如果从main-content div中删除右边距和左边距，您将看到它应用了浮动的正常行为（应该如此）。 Demo

太宽了，无法放在父母的侧边栏旁边，所以它会下降。

但是，我认为问题是您将main-content的宽度设置为500p，将其更改为500px. Demo

Answer 2

#main-content div需要适当的测量值。

#main-content
{
margin-left: 110px;
margin-right: 110px;
float:left;
padding-bottom:150px;
width:500px;
}