html - 浮元素之谜

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 sidebar 的 div 位于顶部并隐藏带有 id main 的 div。我的逻辑是 - 带有 id sidebar 的 div 是 float 的，并从正常流中删除，因此带有 id main 的 div 应该占据它的位置。但是所有浏览器都在带有 id sidebar 的 div 下方显示带有 id main 的 div，就好像没有 float 一样。

Answer 1

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

HTML:

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

CSS:

.clr{clear:both;}

DEMO here.