HTML: <p> 标签下推 float 的 <div>

Question

我正在做一个网站设计(重新学习 HTML 和 CSS，因为我已经好几年没用过它们了)，我遇到了一个看似相当简单的问题，而且我敢肯定我以前遇到过，但不记得如何解决。

在我的设计中，主要内容位于页面左侧，侧边栏位于右侧:jsfiddle .侧边栏是 float: right;，内容容器是 float: right;。问题是，哪个元素首先出现会压低另一个元素。我希望他们并排坐在一起。

HTML:

...
<div id='page-container'>
<aside id='sidebar'>
  <div class='sidebar-item'>
    <p>Sidebar</p>
  </div>
</aside>

<main id='body-container'>
  <h1 id='main-title'>Welcome to WebsiteName!</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut erat
    volutpat, semper metus id, suscipit justo. Maecenas ut lacus sit amet lacus
    elementum tempus. Suspendisse sit amet sem venenatis, mollis enim vel,
    vehicula nisi. Phasellus sed condimentum ligula. Curabitur vehicula sem in
    volutpat vulputate. Maecenas feugiat ipsum quis quam euismod lacinia. In
    congue vel dui ac dignissim. Maecenas iaculis, odio fermentum tincidunt
    aliquam, elit massa tristique nisl, quis fringilla nisl purus sed risus.
    Cras malesuada posuere elit sed auctor. Phasellus hendrerit adipiscing
    commodo.</p>
  <img id='image' src='logo.svg' alt='PollardNET | Home' />
</main>

<div class='clearer'>
  <!--Needed to ensure floats work correctly!-->
</div>
</div>
...

CSS:

...
#sidebar {
  float: right;
  margin: 100px;
  margin-left: 50px;
  margin-top: 50px;
  width: 250px;
  padding: 5px;
  padding-left: 20px;
  border-left-style: solid;
  border-left-width: 2px;
  border-left-color: #a4a4a4;
}

#body-container {
  float: left;
  position: relative;
  margin: 100px;
  margin-right: 427px;
  margin-top: 50px;
}
...
.clearer {
  clear: both;
}
...

如果我从内容部分删除任何文本(p 标签)，问题似乎就消失了。由于某种原因，这在 jsfiddle 中不起作用，但在 Chrome 中显示。有谁知道我该如何解决这个问题？

Answer 1

从 #body-container 中移除 float: left;。一般来说，你不需要为每边指定两个 float ，一个 float 就足够了。参见 updated JSFiddle .