浮元素之谜

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 main隐藏div。我的逻辑是 - 带有侧边栏的div被浮动并从正常流程中移除，因此具有id main的div应该占据其位置。但是所有的浏览器都显示div，id位于div下方，ID为sidebar，就像没有浮动一样。

Answer 1

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

HTML：

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

CSS：

.clr{clear:both;}

DEMO here.