HTML/CSS float : left; is not working properly

Question

我目前正在阅读 Headfirst CSS/HTML，但我对示例有疑问。

我正在尝试使用 float:left; 将主体 float 到侧边栏的左侧；但是它没有正确 float 。我已经研究过 HTML 和 CSS，但我不太明白出了什么问题。

这就是我想要的样子:

还有 fiddle :https://jsfiddle.net/Taubin/7Lhz4wtd/

#main {
  background: #efe5d0 url(images/background.gif) top left;
  font-size:  105%;
  padding:    15px;
  margin:     0px 10px 10px 10px;
  width:      420px;
  float:      left;
}

<div id="allcontent">
  <div id="header">
  </div>
  <div id="sidebar">
    <p class="beanheading">
      Sidebar text
    </p>
    <p>
      Sidebar text
    </p>
  </div>
  <div id="main">
    <h1>QUALITY COFFEE, QUALITY CAFFEINE</h1>
    <p>
      Main text
    </p>
  </div>
</div>

如有任何建议，我们将不胜感激。

Answer 1

首先，可能是您添加边距和填充的问题，这会增加框的大小，即使框的宽度为 420px，您也必须计算边距和填充，或者使用 * {框大小:边框框； }，它将计算该元素的宽度作为所有尺寸(内边距、边距、宽度)的总和，并且不超过宽度。

其次， float 时元素的顺序很重要，将 main 始终放在侧边栏的顶部，因为元素从上到下开始，当您 float 顶部元素时，底部元素如果更宽，将折叠并对齐与主盒。

截图供引用: