css - 为什么 float 下降？

Question

我有一个简单的CSS布局

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

但我的主要内容似乎下降了(float drop)，我不明白为什么。

我已经简单地设置了它 - fiddle

我可以通过从 main-content div 中删除 float:left 来让它不掉落，但我不明白为什么会这样。容器(包装器)有一个 float:left，我认为这是避免“ float 下降”的方法

我是 float:left 在左侧边栏和包装器上，所以我认为如果我在 main-content div 上设置 float:left，主要内容只会简单地与左侧边栏对齐

Answer 1

#main-content div 需要一个合适的测量值。

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