html - 使用 CSS 属性 "float"在 HTML 中 float div 时遇到问题？

Question

我的 div 有问题。我目前在 html 中有四个“div”，如下所示。我想要做的是将我页面中的所有内容都放在“页面”div 中。在“main”div 中，我有“content”和“side”div，它们都有来自 CSS 的“float:left”属性。令人高兴的是，当我这样做时，我失去了白色的“页面”div 背景。我怎样才能防止这种情况并创建我的内容和侧面 div？我知道这很容易，但出于某种原因我没有做对。任何帮助将不胜感激。

谢谢

<div id=”page”>
   <div id=”container”>
   </div>
   <div id=”main”>
      <div id=”content”>
      </div>
      <div id=”side”>
      </div>
   </div>
</div>

这是我的 CSS 代码

#page 
{
margin: 2em auto;
max-width: 1000px;
background-color:#fff;
}

#main
{
clear: both;
padding: 1.625em 0 0;
width:700px;
}

#content 
{
clear: both;
padding: 1.625em 0 0;
width:740PX;;
float:left;
}

#side
{
width:250px;
margin:5px;
float:left;
}

Answer 1

你失去你的 div 背景的原因是因为它只包含 float 内容，导致它没有高度。一旦有东西“清除”了 float ，它就会再次占据空间。尝试在 main div 之后添加它(您可以在样式表中使用样式):

<div style="clear: both;"></div>