浮动元素之谜

Question

我有以下标记：

<div id="container">
  <div id="sidebar">
    <h2>Sidebar</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
  </div>
  <div id="main">
    <h2>Main</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
  </div>
</div>

以及以下样式：

#sidebar {
   background: #e3e3e3;
   float: left;
}
#main {
   background: #666;
}

我期待带有 id 侧边栏的 div 放在顶部并隐藏带有 id 主的 div。我的逻辑是 - 带有 id 侧边栏的 div 浮动并从正常流程中移除，因此 id 为 main 的 div 应该占据它的位置。但是所有的浏览器都会在 div 的正下方显示 id 为 main 的 div 和 id 侧边栏，就好像没有浮动一样。

Answer 1

你需要在#sidebar之后清除float。

HTML：

<div id="sidebar">
    ....
</div>
<div class="clr"></div>
<div id="main">
    ....
</div>

CSS：

.clr{clear:both;}

DEMO here.