css - 为什么浮动下降？

Question

我有一个简单的 CSS 布局

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

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

我已经在小提琴中设置了它 -小提琴

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

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

Answer 1

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

它太宽了，无法放在父侧边栏旁边，所以它会掉下来。

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

Answer 2

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

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